【徹底解説】HTMLを使って動画を埋め込む方法

動画の埋め込みに使用するvideoタグとiframeタグ

HTML形式で動画をWebサイトに埋め込む方法としては、以下の2つの方法が一般的です。

• videoタグ
• iframeタグ

今回は、このvideoタグとiframeタグを利用した動画の埋め込み方法について解説していきます。

videoタグとiframeタグの特徴

HTML形式でWebサイトに動画を埋め込む方法としてよく利用されるvideoタグとiframeタグですが、それぞれに異なる特徴があります。そのため、埋め込みたい動画の種類や表示方法などによって使い分ける必要があります。

それぞれのタグの特徴と使い分けを簡単に説明します。

• videoタグ：利用できる拡張子が多い
• iframeタグ：YouTube動画などWeb上にアップロードされている動画の埋め込みに利用

次の項では、それぞれの詳細な特徴や具体的な使い方について解説していきます。

videoタグの使い方と属性一覧

videoタグはHTML5※から登場した比較的新しいタグです。

（※HTML5は現在廃止され、HTML Living Standardに統合されています）

高画質動画として多く利用されている「mp4」、iPhoneで利用されている「.mov」などに対応し、幅広い拡張子の動画を埋め込むことができる使い勝手の良いタグです。2022年3月時点では、一般的に使用されているほとんどのブラウザがmp4に対応しているため、Webサイトで使用する動画形式もmp4が主流です。そのため、videoタグはHTMLへの動画埋め込み方法として多くのWebサイトで利用されています。

それでは、具体的にvideoタグの使い方について解説していきます。

videoタグの使い方

videoタグは、src属性に埋め込みたい動画のパスを指定することで動画を表示させることができます。

しかし、このままでは埋め込まれた動画の再生・停止などの操作をWeb上で行うことができないため、追加したい機能を設定する必要があります。

videoタグで使える代表的な属性一覧

videoタグでは、埋め込んだ動画のサイズ変更や再生・停止できる機能を追加するために、以下の属性を設定する必要があります。

controls

動画の再生・停止、全画面表示などの操作をできるようにするための属性です。設定することで再生ボタン、シークバー、ボリュームなどのコントロールパネルが表示されるようになります。

サンプルコード

<video controls=”” src=””sample.mp4””></video>

width、height

動画の横幅（width）、縦幅（height）を調整するための属性です。数値（px）で設定するため、％表示などレスポンシブな設定はできません。レスポンシブなWebサイトに対応させたい場合はCSSで表示サイズの設定を行うことをおすすめします。

サンプルコード 

<video width=”200″ height=”100″ src=”sample.mp4”></video>

autoplay

Webサイトの読み込みと同時に動画を自動再生させるための属性です。注意として、chromeは音の出る動画の自動再生ができない仕様になっているため、muted属性を追加することが必要です（muted属性を追加することで自動再生されるようになります）。

サンプルコード 

<video autoplay muted src=”sample.mp4”></video>

preload

Webサイトの読み込みに合わせて動画の読み込み方法を指示するための属性です。初期値はpreload=”auto”なので、何も指定しなくても動画はダウンロードされますが、必要に応じて以下を設定します。

• auto：初期値 / Webサイトの読み込みと同時に動画をダウンロードする
• none：Webサイトの読み込みと同時に動画のダウンロードをしない
• metadata：Webサイトの読み込みと同時に動画のメタデータのみ読み込みをする

サンプルコード 

<video preload=”metadata” src=”sample.mp4”></video>

loop

動画を繰り返し再生させるための属性です。

サンプルコード 

<video loop src=”sample.mp4”></video>

poster

動画のトップ画面を設定するための属性です。動画がダウンロードされる間（再生ボタンが押される前）に表示される画像を設定することができます。この属性を指定しない場合、動画が再生されるまでは埋め込んだ動画の最初のフレームが表示されます。

サンプルコード 

<video poster=”/image/sample.png”src=”sample.mp4”></video>

playsinline

動画をインライン再生させるための属性です。スマートフォンで動画を再生する際、全画面表示にせず、インライン再生ができるようになります。

サンプルコード 

<video playsinline src=”sample.mp4”></video>

参照元： <video>: 動画埋め込み要素

iframeタグの使い方と属性一覧

iframeはInline Frameの省略で、そのまま「インラインフレーム」や「アイフレーム」と呼ばれています。

iframeタグは、Web上にアップロードされているコンテンツを自分のWebサイトに表示させたい時に使います。Webサイトの中に別のWebサイトのページが埋め込まれているような状態です。ただ単にWebページを表示させるだけでなく、最近では様々なSNSやGoogleマップ、 YouTubeなどの動画コンテンツの埋め込みなど、多くのシーンで利用されています。

ここでは、特に利用される事の多いiframeタグを利用したYouTube動画の埋め込みについて、詳しく解説していきます。

iframeタグの使い方

iframeタグを使うとYouTube動画の埋め込みが簡単にできるのが最大の特徴です。

YouTube動画は以下の手順で埋め込むことができます。

1. 埋め込みたいYouTube動画の「共有」ボタンをクリック
2. ポップアップした画面の左端「埋め込む」ボタンをクリック
3. 表示された「動画の埋め込み」からiframeタグを全てコピー
4. コピーしたタグを埋め込みたいHTMLへペースト

iframeタグもvideoタグと同様に、必要な属性を設定することで、埋め込んだ動画にWebサイトに最適な設定を追加することができます。

iframeタグで使える代表的な属性一覧

YouTubeなどの場合、前述の通り共有ボタンから簡単にコピー&ペーストで動画の埋め込みができてしまいます。

しかし、単純に埋め込むだけでユーザーにとって最適な表示になるとは限りません。よりカスタマイズの幅を広げるために、iframeの属性についても確認しておきましょう。

width、height

動画の横幅（width）、縦幅（height）を調整するための属性です。

サンプルコード

<iframe width=”400″ height=”200″ src=”sample.html”></iframe>

src

埋め込む動画のURLを指定するための属性です。

サンプルコード

<iframe width=”400″ height=”200″ src=”sample.html”></iframe>

title

アクセシビリティの観点から、動画の説明を設定するための属性です。

サンプルコード

<iframe title=”サンプル動画です” src=”sample.html”></iframe>

name

フレーム名を設定するための属性です。JavaScriptなどで要素を取得する際などに使用します。

サンプルコード

<iframe name=”sample” src=”sample.html”></iframe>

sandbox

セキュリティ制限を設定するための属性です。

sandboxには以下のような値を設定することができます。半角スペースで区切って複数の値を設定する事も可能です。何も値を設定しない場合は、すべてのセキュリティー制限が適用されます。必要に応じて設定するようにしましょう。

• allow-forms：フォーム送信を許可する
• allow-downloads：ユーザー操作によるダウンロードを許可する
• allow-downloads-without-user-activation：ユーザー操作なしでのダウンロードを許可する
• allow-modals：モーダルウィンドウを開くことを許可する
• allow-orientation-lock：スクリーンの方向をロック可能にする
• allow-pointer-lock： Pointer Lock APIの利用を許可する
• allow-popups：ポップアップを許可する
• allow-popups-to-escape-sandbox：新しく開いたウィンドウにサンドボックスを継承しないようにする
• allow-presentation：プレゼンテーションモードを許可する
• allow-same-origin：生成元と同じオリジンとみなす
• allow-scripts：スクリプトの実行を許可する

サンプルコード（すべての制限を適用）

<iframe sandbox src=”sample.html”></iframe>

サンプルコード（フォーム送信を許可）

<iframe sandbox=”allow-forms” src=”sample.html”></iframe>

loading

遅延読み込みに使用する属性です。遅延読み込みとは、スクロールで動画が表示されそうになったタイミングで読み込みを始める設定の事です。

サンプルコード

<iframe loading=”lazy” src=”sample.html”></iframe>

allow

埋め込んだ動画に対してさまざまな機能を設定する属性です。allow属性もsandbox同様、様々な値を設定することができます。値は「;」で区切って複数設定する事も可能です。

• allow=controls：再生、一時停止、音量、シークバーなどのコントロールを表示する
• allow=fullscreen：全画面表示を設定する（YouTubeではallowfullscreenと記述）
• allow=autoplay：動画の自動再生を設定する/初期値は0で、自動再生しない/1を設定すると、自動再生する
• allow=mute：ミュートに設定する
• allow=picture-in-picture：ピクチャ・イン・ピクチャ（画面を浮遊する小さなウィンドウに動画を表示させる機能）を設定する

サンプルコード

<iframe allow=”autoplay; picture-in-picture” src=”sample.html”></iframe>

動画をマルチブラウザに対応させる方法

Webサイトを閲覧する環境はユーザーによってさまざまです。そのため、どのような環境でも問題なく閲覧できるように、videoタグとiframeタグを設定する必要があります。これをマルチブラウザ対応と呼びます。

videoタグの場合

videoタグで埋め込んだ動画をマルチブラウザ対応にするためには、追加でsourceタグを利用するのが一般的です。sourceタグは、videoタグの中に複数の設定の入れ子として指定するためのタグです。sourceタグを使って埋め込む動画を複数設定することでさまざまな環境で動画が再生できるようになります。

サンプルコード

<video playsinline src=”sample.mp4”></video>

<video>

<source src=”sample.mp4” type=”video/mp4”>

<source src=”sample.mp4” type=”video/mp4”>

<source src=”sample.mov” type=”video/quicktime”>

</video>

上記のようにvideoタグの中にsourceタグで異なる拡張子の動画を設定しておくことで、閲覧したユーザーの環境に適した動画を再生することが可能です。

また、HTMLに埋め込んだ動画が閲覧するユーザー側の環境では再生できない場合を想定して以下の設定を追加しておくことをおすすめします。

サンプルコード

<video playsinline src=”sample.mp4”></video>

<video src=”sample.mp4”>

<source src=”sample.mp4” type=”video/mp4”>

<source src=”sample.mov” type=”video/quicktime”>

<p>非対応の形式のため動画を再生できません。</p>

</video>

動画が再生できない環境の場合<p></p>の間の文字列が表示されるため、念のため設定しておくとよいでしょう。

iframeタグの場合

iframeは比較的古くからあるタグで、ほとんどのブラウザで対応しています。そのため、表示させるだけならそのままでも問題ありません。

ただし、ブラウザサイズに応じて幅を変化させるレスポンシブデザインに対応させるにはCSSでの対応が必要です。以下のサンプルコードはその一例です。

サンプルコード

• HTML

<div class=”iframe-area”>

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/pNQfOP2y1NM” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

</div>

• CSS

.iframe-area {

position: relative;

padding-bottom: 56.25%; /* アスペクト比 16:9の場合の縦幅 */

height: 0;

overflow: hidden;

}

.iframe-area iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

動画が再生されない場合の対処法

「タグを利用して動画の埋め込みを行ったにも関わらず動画が再生されない」など、正しく設定したつもりでも、ちょっとした事で動画が表示されないことはよくあります。そのような場合に確認すべき項目と対処法をいくつか紹介します。

タグ・動画のパスなどコードの記述を確認

タグやパスなどを含むコードは、一文字違っているだけでも正しく表示されません。そのため、想定していた挙動と異なる場合はコードを一から確認してみましょう。これだけで解決する場合も多くあるものです。特に、初めて動画の埋め込みをした際やWebサイトの設定が変わった際などにはよく確認するようにしましょう。 

別の環境で閲覧できるかを確認

前述の通り、ブラウザやPC・スマートフォンなどWebサイトの閲覧環境はさまざまです。動画が正しく再生されない場合、別の環境での確認を試みるようにしましょう。

PCブラウザであればChrome、Safari、Edge、Internet Explorer、Firefoxなどで確認します。スマートフォンであればAndroid、iOSを試します。どれか特定の環境で正しく表示されない場合は、属性の設定に過不足がないかを改めて確認してみましょう。

また、動画をマルチブラウザに対応させる方法の項でも説明したように、videoタグではsourceタグを使って動画をマルチブラウザに対応させる事も有効です。

閲覧環境の設定を確認

コードの確認やタグ、属性の見直しを行ったにも関わらず動画が正しく再生されない場合は、自身の閲覧環境の設定も確認してみましょう。

例えばiPhoneでWebサイトを閲覧する際、iPhoneが省電力モードの設定になっていると動画が自動再生されない事があります。このように、閲覧する端末の設定が動画の再生に影響する事も考えられます。

埋め込んだ動画を確認する際は、複数のブラウザと端末での確認に加え、細かい設定が影響している可能性も考慮する必要があります。

色々なコンテンツへの埋め込み

今回はWebサイトへ動画を埋め込む方法について解説してきました。

しかし、5G回線のさらなる普及や動画コンテンツの増加、それに伴いWebサイト以外でも動画コンテンツを活用する場面はますます増えると予想されます。そこでここでは、番外編としてWebサイト以外への動画の埋め込み方法をいくつか紹介します。

Twitter投稿への動画埋め込み

HTMLを使うWebサイトへの埋め込みとは違い、Twitterへはローカル内（PCやスマートフォン）に保存された動画を直接埋め込む方法が一般的です。

手順は以下の3つだけです。

ギャラリーボタンをクリック

ローカルの動画ファイルを選択

投稿したいテキストを入力

メールやLINEに動画を貼り付ける感覚で直感的に動画の埋め込みができるため、Webサイトへの埋め込みと比較すると手軽に動画を埋め込むことができます。

ただし、投稿に動画が埋め込まれるため、サイズの変更などの設定をすることはできません。Twitter投稿で設定できるのは自動再生に関してのみです。「設定とプライバシー」の項目から「動画の自動再生」のオン・オフを切り替えることができます。

Twitter投稿へ動画を埋め込む場合、以下の2つが注意点として挙げられます。

まず1つ目は、投稿できる動画の形式が、videoタグを使ってWebサイトに動画を埋め込む場合に比べると少なくなる点です。携帯端末からは「mp4」「mov」の2種類、ブラウザからは「mp4」のみが対応しているファイル形式です。

2つ目の注意点は、埋め込める動画サイズ・再生時間が限られている点です。Twitter投稿には長さ2分20秒、512MB以下の動画しか埋め込めない仕様になっています。長さやサイズが上記を超える動画を埋め込みたい場合は、別の方法で埋め込む必要があります。

直接埋め込む以外でよく使われる方法は、YouTubeにアップロードした動画を貼り付ける方法です。埋め込みたいYouTube動画の共有ボタンをクリックし、Twitterを選択することで、YouTube動画を埋め込んだツイートを投稿することができます。

PDFファイルへの動画埋め込み

あまり広く知られていませんが、ビジネスシーンでよく利用されるPDFファイルにも動画を埋め込むことができます。PDFファイルに動画を埋め込むには、Adobe社が有償で提供している「Adobe Acrobat DC」が必要です。

手順は以下の通りです。

埋め込みたいPDFファイルを開く

「ツール」から「リッチメディア」「ビデオを追加」を選択

埋め込みたい動画ファイルを選択

PDFへの動画の埋め込みは、videoタグを利用したHTMLを使った動画の埋め込みのようにいくつかの属性を追加することが可能です。詳細オプションから「コントロール」のタブを開き「スキン」のプルダウンから好みの設定を選択しましょう。コントロールバー自体の有無や、再生・ミュートボタン、シークバーの有無などが変更可能です。

Adobe Acrobat DCは有償ソフトですが、動画埋め込み以外にもさまざまな機能があります。興味のある方は試してみてください。

QRコードで動画埋め込み

QRコードはURLを二次元コード化したものです。チラシやポスターなど多くの販促物でもよく見かけるようになりました。iCloudやYouTubeなどで公開設定にしている動画のURLをQRコード化すれば、動画を再生できない紙媒体でもPRすることができます。

まとめ

さまざまなシーンで動画コンテンツが活用されています。今回はその動画コンテンツの埋め込み方法やよく起こる問題点と解決策について解説しました。

HTMLは多くのWebサイトで使われている言語であるため、videoタグとiframeタグは、Webサイトを運営するうえで必須の知識の1つと言えます。

コードを直接書き込まなくてもWebサイトを作成できるWordPressのようなCMSを利用していた人も、これを機に、埋め込まれた動画のコードを書き換えて自分好みにカスタマイズしてみてはいかがでしょうか。

（今回紹介したサンプルコードは一例です。環境によっては更に調整が必要な場合もあります）

WEBでのお問い合わせはこちら