はじめに
目的
この章では、本ドキュメントの目的と全体の流れを分かりやすく説明します。Webサイトやホームページに動画を配置する際の基本的な考え方を理解していただくことを目指します。
概要
動画を埋め込む方法は大きく二つあります。1つ目はYouTubeやVimeoのような動画共有サイトが提供する「埋め込みコード」を使う方法です。2つ目はHTMLのvideoタグを用いて、動画ファイルを直接ページに置く方法です。どちらの方法もメリットと注意点があります。
対象読者
初心者から中級者のWeb制作者、ブログ運営者、WordPressを使う方を想定しています。専門用語はできるだけ減らし、具体例を交えて解説します。
本書の構成
以降の章で、各方法の手順、YouTubeやVimeoでの埋め込み手順、videoタグでの実装、対応する動画形式、WordPressでの埋め込み方法や注意点を順に説明します。実務で使いやすい手順を中心に解説します。
方法1：動画共有サイトのコードから埋め込む
概要
YouTubeやVimeoなどが自動生成する埋め込み用のiframeコードを使う方法です。HTMLにコピーするだけで表示でき、専門知識が少なくても扱えます。
手順（簡単）
- 動画ページの「共有」→「埋め込み」を選ぶ。
- 表示されたiframeコードをコピーする。
- 自分のHTMLやCMSの本文に貼り付ける。
コード例
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
レスポンシブ対応の簡単な方法
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="https://www.youtube.com/embed/動画ID" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>
注意点
- 自動再生やプライバシー関連の設定はプラットフォーム側で変わります。
- 広告や関連動画が表示される場合があります。
- 利用規約に従って埋め込んでください。
ポイント
- 簡単で安全に使える。
- カスタマイズが限られるので、見た目や動作を細かく変えたい場合は別方法を検討してください。
YouTubeからの埋め込みコード取得手順
概要
YouTube動画を自分のサイトに表示するには、動画ページからiframe形式の埋め込みコードを取得します。コードはそのまま貼り付けることを想定しているため、コピー＆ペーストを正確に行ってください。
手順（簡単）
- 埋め込みたいYouTube動画のページを開く。
- 動画下の「共有」ボタンをクリックする。
- 表示されるメニューで「埋め込み」を選ぶ。
- 表示されたiframeタグを全て選択してコピーする。
確認ポイント
- コードは長めなので途中で切らないように注意してください。
- 「開始位置」や「プレーヤーコントロール」などの設定を変更すると、表示されるコードが変わります。設定後はもう一度コピーしてください。
- プライバシー強化モード（youtube-nocookie.com）を使うと、訪問者のトラッキングが減ります。
貼り付け時の注意
- WordPressではブロックエディタの「カスタムHTML」ブロックやクラシックエディタの「テキスト」タブに貼り付けます。
- 幅や高さはiframe内のwidth/height属性で変えられますが、レスポンシブにする場合はCSSのラッパーを使うと扱いやすいです。
以上が基本の流れです。コピー貼り付けを正確に行えば、簡単に動画を埋め込めます。
WordPressへの埋め込み手順
概要
WordPress（ブロックエディタ）では、動画を簡単に埋め込めます。動画を表示したい箇所にカーソルを置き、「＋」からブロックを選ぶだけで済みます。
手順（ブロックエディタ）
- 投稿または固定ページの編集画面を開き、動画を挿入したい位置にカーソルを置きます。
- 「＋」をクリックしてブロックを選びます。主な選択肢は次の通りです。
- 「YouTube埋め込み」ブロック：YouTubeのページURLを貼り付けます。自動で埋め込み表示します。
- 「動画」ブロック：自分でアップロードしたファイルや外部URLを使えます。
- 「カスタムHTML」ブロック：iframeタグなどHTMLを直接貼り付けます。
iframeを使う場合の例
カスタムHTMLに以下のようなコードを貼ります（例）：
<iframe src="https://www.youtube.com/embed/動画ID" width="560" height="315" frameborder="0" allowfullscreen></iframe>
プレビューと公開時の違い
編集画面のプレビューで見えないことがありますが、公開ページでは正常に表示されることが多いです。公開前に実際のページで確認してください。
ひと手間の設定
- レスポンシブ対応はwidthを100%にし、CSSでアスペクト比を保つ方法が確実です。
- 自動再生はユーザー体験やブラウザ制限に注意してください。
以上がWordPressへの基本的な埋め込み手順です。わかりやすく実行してみてください。
動画共有サイトの埋め込みのメリット・デメリット
以下では動画共有サイト（例：YouTube、Vimeo）の埋め込みを使うときの良い点と注意点をわかりやすく説明します。
メリット
- 手軽に表示できる
- 埋め込みコードを貼るだけで動画が再生できます。初心者でも実装しやすいです。
- サイト側の機能を利用できる
- 字幕、自動再生、画質切替、再生リストなどの機能をそのまま使えます。視聴者に便利です。
- 帯域や保存の負担が軽くなる
- 自分のサーバーに大きな動画ファイルを置く必要がなく、ホスティング費用を抑えられます。
デメリット
- 読み込み速度が遅くなることがある
- 外部サーバーやスクリプトを読み込むため、ページ表示が重くなる場合があります。対策として遅延読み込み（スクロールで読み込む）を使うと改善します。
- 広告やブランド表示が入ることがある
- 無料サービスでは広告やロゴが表示され、見た目や体験が制限されることがあります。
- 動画削除や地域制限のリスク
- サイトの利用規約違反で動画が削除されたり、地域制限で見られなくなる可能性があります。重要な動画はバックアップを用意してください。
- プライバシーとクッキーの問題
- 視聴者のデータが外部に送られるため、個人情報やクッキーの取り扱いに注意が必要です。
実用的には、まず埋め込みを使い、必要に応じて遅延読み込みやプライバシー設定を併用するとバランスが取れます。
Vimeoの埋め込み方法
概要
Vimeoの動画は、動画ページの「共有」から埋め込みコードを取得し、Webページに貼り付けるだけで再生できます。ここでは手順とカスタマイズ、WordPressでの貼り方、注意点を分かりやすく説明します。
手順（基本）
- Vimeoで目的の動画を開きます。
- 動画タイトル下の「共有」ボタンをクリックします。
- 表示されるウィンドウで「埋め込み」タブを選びます。
- サイズや再生オプションを必要に応じて設定します。
- 表示されたiframeコードをコピーして、WebページのHTMLに貼り付けます。
埋め込みコードの例
<iframe src="https://player.vimeo.com/video/動画ID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
カスタマイズできる主な項目
- サイズ（width/height）
- 自動再生、ループ、音声（オプション設定）
- タイトルや作者名の表示/非表示
- ドメイン制限（公開範囲の設定）
WordPressへの貼り付け
- ブロックエディタ：『カスタムHTML』ブロックにiframeを貼ります。
- クラシックエディタ：テキストモードで貼り付けます。
注意点
- 自動再生は端末やブラウザで制限されることがあります。
- レスポンシブ対応はCSSでラッパーを付けると安心です。
- プライバシー設定や利用権に気を付けてください。
方法2：videoタグを使った直接埋め込み
概要
動画ファイルを自分のサーバーに置き、HTMLのvideoタグで直接表示します。動画共有サイトのサーバーに依存しないため、読み込みの最適化がしやすく、利用規約違反の心配が少ないです。主にMP4（H.264）を用います。
準備するもの
- 動画ファイル（MP4を推奨）
- 十分なサーバー容量と帯域幅
- ブラウザ互換性の確認
基本のHTMLコード
<video controls src="/path/to/video.mp4" width="640" height="360">このブラウザはvideoタグに対応していません。</video>
width/heightは任意です。
便利な属性と意味
- controls: 再生ボタンなどのUIを表示します。
- autoplay: 自動再生します。モバイルでは制限されることがあります。
- loop: ループ再生します。
- muted: 音声を消します。自動再生と組み合わせる際に有効です。
- poster: 読み込み前に表示する静止画を指定します。
- preload: metadata/auto/noneで先読み動作を指定します。
レスポンシブ対応
CSSでmax-width:100%;height:auto;を指定すると画面幅に応じてサイズが変わります。例：
video{max-width:100%;height:auto;}
注意点
- ファイルサイズが大きいと読み込みや帯域に影響します。画質と容量のバランスを調整してください。
- すべてのブラウザで同じコーデックが使えるとは限りません。必要なら複数形式を用意します。
- サーバー負荷や配信量を把握しておくと安心です。
- 著作権や利用許諾に注意してください。
対応する動画形式
概要
ホームページに挿入する動画は、互換性と表示品質を考えて選びます。一般的にはMP4がもっとも無難で、背景動画やメインコンテンツに向きます。WebMはファイルサイズを抑えたい場合に有効です。
主な形式と使いどころ
- MP4（.mp4）: 幅広いブラウザと端末で再生できます。H.264（映像）＋AAC（音声）の組み合わせが標準的で、汎用性が高いです。
- WebM（.webm）: 圧縮効率が良くサイズを小さくできます。特にVP9やAV1を使うと画質当たりの容量が減りますが、古い環境では未対応のことがあります。
- Ogg（.ogv）: 古い規格で限定的に使われます。現在はMP4かWebMを優先します。
コーデックと音声
コンテナ（mp4/webm）とコーデック（H.264/VP9/AV1）は別物です。音声はAACかOpusを用いると互換性が高くなります。
ブラウザ対応とフォールバック
複数のソースを用意してブラウザに選ばせます。例:
推奨設定（目安）
- フルHD：H.264、ビットレート5–8Mbps
- モバイル向け：720p、ビットレート1–2Mbps
- 背景動画：短くループ、無音（muted）にする
使い分けのまとめ
トップページや多くの端末で確実に再生させたいならMP4。容量優先でかつ対象ブラウザが新しければWebMを併用すると良いです。
HTMLコード作成手順と重要な属性
基本の書き方
videoタグは単純です。動画ファイルのパスをsrcに指定し、表示サイズや操作方法を属性で指定します。例:
<video src="video.mp4" width="640" height="360" controls poster="poster.jpg">
お使いのブラウザはvideoタグに対応していません。
</video>
作成手順（簡潔）
- 動画ファイルを準備する（例：MP4）。
- width/heightで表示サイズを決める。レスポンシブにする場合はCSSで幅100%にします。
- controlsやautoplayなど必要な属性を追加します。autoplayを使う場合はmutedを付けることが多いです。
- posterで読み込み前の画像を設定します。
- 字幕は
重要な属性の説明
- controls：再生・音量などの操作UIを表示します。
- autoplay：自動再生します。ほとんどの環境でmutedと併用します。
- muted：音を消します。autoplayの必須に近いです。
- loop：再生が終わると自動で繰り返します。
- playsinline：スマホでフルスクリーン化せずページ内再生します（iPhone向け）。
- preload：auto/metadata/noneで読み込みの挙動を制御します。
- poster：読み込み前に表示する画像を指定します。
- crossorigin：外部サーバからロードする場合のCORS設定です。
アクセシビリティとフォールバック
- 字幕（
- 古いブラウザ向けにテキストで「動画が再生できません」と表示すると親切です。
実装上の注意点
動画を直接埋め込む際は、見た目だけでなく運用面の負担も考慮してください。ここでは実装でよく起きる注意点を分かりやすく挙げます。
サーバー制限の確認
サーバーやWordPressにはアップロード容量やPHPの設定に上限があります。例えばアップロード上限が64MBの場合、200MBの動画はそのままでは入れられません。事前にホスティングの管理画面やphpinfoで「upload_max_filesize」「post_max_size」「ディスク容量」を確認してください。
ファイルサイズと画質のバランス
重たい動画はページ表示を遅くします。画質を少し落として容量を減らす、または解像度を720pに下げるなどで負荷を抑えます。MP4（H.264）などブラウザ互換の形式に変換すると安全です。
表示の最適化
preload=”none”やposter画像を使って読み込みを遅延させます。自動再生はモバイルの通信量を増やすため注意が必要です。再生はcontrolsを使いユーザー任せにすると良いです。大きなトラフィックが見込まれる場合はCDNや外部配信を検討してください。
WordPress初心者へのおすすめ
初心者はまずブロックエディターの「動画」ブロックやメディアライブラリを使ってください。複雑な設定を避けられます。負荷が心配ならYouTubeやVimeoにアップして埋め込む方法も検討しましょう。
テストと運用チェック
公開前にスマホ・PCで表示速度と再生を確認し、サイト全体の速度やバックアップ、ディスク残量を定期的に監視してください。
WordPressでの直接アップロード方法
概要
Gutenbergエディターで動画を直接アップロードする方法を丁寧に説明します。記事中の「動画」ブロックを使い、メディアライブラリからアップロード済みの動画を呼び出して挿入します。
手順
- 記事編集画面で「+」を押して「動画」ブロックを選択します。
- ブロック内の「アップロード」または「メディアライブラリ」を選び、ファイルをアップロード、または既存の動画を選択します。
- サムネイル（ポスター画像）やキャプションを設定します。短い説明文を入れると親切です。
- ブロック設定で自動再生、ループ、ミュートのオン・オフを選べます。モバイルでは自動再生が制限されることがあります。
- 記事を保存し、プレビューで再生や表示を確認して公開します。
注意点
- ファイルサイズとサーバーのアップロード上限を確認してください。大きい場合は圧縮や外部ホスティングを検討してください。
- 推奨形式はmp4（H.264）。互換性が高いです。
- アクセシビリティのために代替テキストやキャプションを入れてください。
- ページ表示速度に注意し、必要なら遅延読み込みやCDNを利用してください。
以上で、Gutenbergによる直接アップロードの基本操作と注意点の説明を終わります。
