目次
HTMLを使って、動画をWebサイトに埋め込む方法としては、主に以下の2つの方法があります。
この章では、それぞれのタグの特徴と使い分けについて解説します。
videoタグは、HTML5で新たに追加された動画埋め込み専用の要素です。YouTubeやVimeoなどの外部サービスに頼ることなく、自分で用意した動画ファイルをWebページ上に直接埋め込んで再生できます。サーバー上に置かれた動画をそのまま読み込み、細かい再生設定が可能なことから、ユーザー体験の自由度が高い実装方法として利用されています。
videoタグは、外部サービスを使用せずに動画を掲載できるという構造上の自由度に加え、形式の柔軟性や再生制御の多様さといった技術的な利点を備えています。videoタグを利用することで得られる代表的なメリットについて解説していきます。
videoタグは、mp4・webm・oggなど、主要な動画形式に対応しています。これにより、複数のソースを用意しておけば、ユーザーの利用するブラウザやデバイスに関係なく動画を安定して再生することが可能となります。互換性を意識した設計がしやすく、再生エラーを避けやすいという点で実用性が高い方法です。
videoタグは、HTML属性を用いることで再生の挙動を細かく制御できます。再生ボタンや音量調整バーの表示、動画の自動再生、ループ再生、ミュート再生といったオプションを簡単に指定できるため、ユーザー体験やページ設計に応じた柔軟な調整が可能です。
動画ファイルをHTMLに直接記述する構造上、検索エンジンがその存在を把握しやすく、適切なマークアップを併用すればSEOの面でも効果が期待できます。たとえば、構造化マークアップ（VideoObject）を記述することで、検索結果に動画がサムネイル付きで表示される「リッチリザルト」の対象になることがあります。
一方で、videoタグはその構造ゆえに、運用上の注意点や技術的な制約も抱えています。ここでは、videoタグの主なデメリットについて詳しく見ていきます。
動画ファイルは通常サイズが大きく、ページ読み込み時にそのまま読み込まれる設計にしている場合、表示速度に悪影響を与える可能性があります。とくにモバイル環境や通信速度が不安定なネットワーク下では、ページ全体の読み込みに支障をきたす要因となりえます。
動画ファイルを自社サーバーでホスティングしている場合、再生数が増えるとサーバーの帯域や処理能力に負荷が集中するリスクがあります。高トラフィックなサイトでは、CDNの導入や別途ストリーミング配信インフラの併用が必要になるなど、システム面での配慮が求められます。
iframeタグは、HTML内に外部コンテンツを埋め込むための汎用的な要素であり、YouTubeやVimeoといった動画共有サービスを利用してWebページに動画を表示する際に広く使われています。埋め込み用のURLを指定するだけで動画プレーヤーが表示されるため、導入の手軽さと保守の簡便さが大きな特徴です。
iframeタグは、YouTubeなどの外部動画サービスを簡単に埋め込む手段として広く使われており、初学者でも導入しやすいシンプルさと、外部ホスティングの利点を兼ね備えています。iframeを活用することで得られる主なメリットを紹介します。
iframeタグは、埋め込みたい動画サービスが提供するURLと数行のコードをコピーするだけで導入できるため、HTMLの知識が浅い制作者でも問題なく利用できます。面倒なエンコードやファイル形式の調整も不要で、極めて低コストに動画コンテンツを導入できます。
動画の実体は外部サービス（たとえばYouTube）側でホストされているため、自社のサーバーに直接負荷がかかることはありません。再生トラフィックや帯域、ストレージを自前で用意する必要がないため、低予算・低リスクで安定した動画配信が可能です。
iframeで埋め込んだ動画の内容変更は、元の動画サービス上で差し替えを行えば反映されます。Webページ自体を修正する必要がなく、運用管理が非常にシンプルです。動画の入れ替えが頻繁に発生するケースでは、保守性の高さが大きな強みになります。
便利なiframeタグですが、カスタマイズ性の制限やSEO効果の低さなど、外部依存による特有のデメリットも存在します。iframeタグを使用する際に注意しておくべき制約やリスクについて解説します。
iframeタグは、再生プレーヤーやUIのデザイン、再生挙動などを動画サービス側に依存するため、再生ボタンの位置や色を自由に変更することはできません。ページデザインに合わせた統一感を持たせたい場合には不向きな面があります。
iframeで埋め込まれた動画は、検索エンジンからは「外部コンテンツ」として扱われるため、その中身がクローリングされず、検索結果で上位表示されにくいという特徴があります。動画を自社のコンテンツ資産として活かしたい場合には、構造的に不利になる可能性があります。
実際には、Googleなどの検索エンジンが動画の内容を理解し、適切な検索キーワードで表示されるようSEO対策を行います。、後ほど解説しているので、是非ごらんください。
iframeは、埋め込み元である外部サービスの仕様に強く依存しています。たとえば、UIが変更されたり、埋め込み機能が停止された場合、自社のページでも同様の影響を受けるため、安定した長期運用を行うには注意が必要です。
videoタグとiframeタグは、それぞれにメリットとデメリットがあります。動画をWebサイトに埋め込む目的や用途に合わせて、適切なタグを選択することが重要です。
videoタグが適しているケースは以下の通りです。
一方で、iframeタグが適しているケースは以下の通りです。
videoタグには、動画の再生方法や表示方法などを設定するための、様々な属性があります。ここでは、よく使われる主要な属性について解説します。
src属性は、埋め込む動画ファイルのパスを指定するための属性です。相対パスまたは絶対パスで指定することができます。
<video src="videos/movie.mp4" controls></video>
<video src="https://www.example.com/videos/movie.mp4" controls></video>controls属性を指定すると、動画の下にコントロールパネルが表示されます。コントロールパネルには、再生、一時停止、音量調整、フルスクリーン表示などのボタンが含まれます。
サンプルコード
<video src="movie.mp4" controls></video>width属性とheight属性は、動画の表示サイズを指定するための属性です。ピクセル単位で指定します。
<video src="movie.mp4" width="640" height="360" controls></video>autoplay属性を指定すると、ページの読み込みが完了した後に、動画が自動的に再生されます。
ただし、ユーザーの意図しない再生は、不快感を与える可能性があるため、慎重に使用する必要があります。
また、ブラウザによっては、autoplay属性が指定されていても、自動再生されない場合があります。特に、音声付き動画の自動再生は、多くのブラウザで制限されています。
<video src="movie.mp4" autoplay controls muted></video>autoplay属性を用いる場合に、自動再生を許可するブラウザを増やすことができます。
<video src="movie.mp4" autoplay muted controls></video>preload属性は、ページの読み込み時に、動画ファイルをどのように読み込むかを指定するための属性です。以下の3つの値を指定できます。
コードにするとどうなるか見てみましょう。
<video src="movie.mp4" preload="metadata" controls></video>preload属性は、ページの読み込み速度や、ユーザーのデータ使用量に影響を与えるため、慎重に設定する必要があります。
一般的には、動画がメインコンテンツである場合はauto、そうでない場合はmetadataまたはnoneを指定すると良いでしょう。
loop属性を指定すると、動画が最後まで再生された後、自動的に最初から再生が繰り返されます。
<video src="movie.mp4" loop controls></video>poster属性は、動画が再生される前に表示される画像（サムネイル画像）を指定するための属性です。
<video src="movie.mp4" poster="thumbnail.jpg" controls></video>poster属性を指定することで、動画の内容を視覚的に伝え、ユーザーの興味を引くことができます。
playsinline属性を指定すると、モバイル端末で動画をインライン再生することができます。インライン再生とは、ページ内で動画を再生することです。
playsinline属性を指定しない場合、多くのモバイル端末では、動画を再生すると自動的にフルスクリーン表示になります。
<video src="movie.mp4" playsinline controls></video>picture-in-picture属性は、ユーザーが他のタスクをしながらでも、動画を小さなウィンドウで視聴できる機能です。youtubeやNetflixでよく使われている機能です。
この属性は、HTML Living Standardで定義されている比較的新しい属性であり、主要なブラウザでは対応が始まっています。
ただし、現状では利用できるブラウザやデバイスが限られているため、注意が必要です。現時点では、デフォルトで有効になっているブラウザは、Chrome、Edge、Safariです。
<video src="movie.mp4" controls playsinline disablePictureInPicture></video>sourceタグを利用することで、ユーザーの環境や設定に応じて、異なる動画ファイルを出し分けることができます。
例えば、高画質版と低画質版の動画を用意しておき、ユーザーの回線速度に応じて、最適な動画を配信することができます。
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<p>動画が再生できない場合は、<a href="movie.mp4">こちら</a>からダウンロードしてください。</p>
</video>videoタグで埋め込んだ動画をレスポンシブデザインに対応させるためには、CSSでスタイルを指定する必要があります。
例えば、以下のCSSコードを使用すると、動画の幅を画面幅に合わせて自動的に調整することができます。
video {
width: 100%;
max-width: 100%;
height: auto;
}このCSSコードでは、動画の幅を画面幅の100%に設定し、最大幅も100%に制限しています。
また、高さをautoに設定することで、動画の縦横比を維持したまま、幅に合わせて高さを自動的に調整することができます。
videoタグで使える主要な属性の紹介は以上となります。今度はiframeタグで使える属性も見てみましょう。
iframe タグとは、Webページ内に別のWebページやコンテンツ（例：YouTube動画）を埋め込むためのHTML要素です。ここでは、よく使われる主要な属性について解説します。
src属性は、埋め込むコンテンツのURLを指定するための属性です。YouTube動画を埋め込む場合は、動画の埋め込み用URLを指定します。
<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>width属性とheight属性は、埋め込みコンテンツの表示サイズを指定するための属性です。ピクセル単位で指定します。
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"></iframe>title属性は、埋め込みコンテンツの説明を記述するための属性です。スクリーンリーダーなどの支援技術を利用するユーザーに、コンテンツの内容を伝えるために役立ちます。
<iframe src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube動画のタイトル"></iframe>name属性は、iframe要素に名前をつけるための属性です。JavaScriptなどで、特定のiframe要素を操作する際に使用します。
<iframe src="https://www.youtube.com/embed/VIDEO_ID" name="youtube-player"></iframe>sandbox属性は、埋め込みコンテンツに適用するセキュリティ制限を指定するための属性です。
何も値を設定しない場合は、すべての制限が適用されます。
以下は、主な値とその効果です。
コードにすると、どうなるか見てみましょう。
<iframe src="https://www.youtube.com/embed/VIDEO_ID" sandbox="allow-same-origin allow-scripts"></iframe>loading属性は、iframe要素の読み込み方法を指定するための属性です。
以下の値を設定できます。
コードにするとこのようになります。
<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>allow属性は、埋め込んだ動画の機能や動作を制御するための属性です。
以下は、YouTube動画を埋め込む際によく使われる値です。
コードはこのようになります。
<iframe src="https://www.youtube.com/embed/VIDEO_ID" allow="autoplay; encrypted-media; picture-in-picture; fullscreen"></iframe>iframeタグで埋め込んだ動画をレスポンシブデザインに対応させるためには、CSSでスタイルを指定する必要があります。
例えば、以下のCSSコードを使用すると、動画の幅を画面幅に合わせて自動的に調整することができます。
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9のアスペクト比 */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>このCSSコードでは、iframe-containerというクラス名のdiv要素でiframeタグを囲み、div要素にposition: relative;を指定しています。
そして、padding-bottom: 56.25%;を指定することで、16:9のアスペクト比を維持しています。iframe要素には、position: absolute;を指定し、top: 0;、left: 0;とすることで、div要素の左上に配置しています。
さらに、width: 100%;とheight: 100%;を指定することで、iframe要素をdiv要素いっぱいに広げています。
動画をWebサイトに埋め込むだけでなく、検索エンジンからユーザーを誘導するためには、動画SEOが重要です。ここでは、動画SEOのメリットと具体的な施策について解説します。
動画SEOとは、検索エンジン最適化（SEO）の動画版であり、動画コンテンツを検索エンジンに最適化し、検索結果で上位表示させるための施策です。
具体的には、Googleなどの検索エンジンが、動画の内容を理解し、適切な検索キーワードで表示されるように、対策を行います。
動画SEOを行うことで、以下のようなメリットがあります。
動画をWebページに埋め込む際、検索エンジンに正しく認識させ、より多くのユーザーにリーチするためには、動画SEOが重要です。以下では、具体的な施策を4つの視点から整理して紹介します。
動画SEOの基本は、検索されやすいキーワードを調査し、それを動画のメタ情報に適切に反映させることです。具体的には、Googleキーワードプランナーなどを使って関連語を選定し、タイトル・説明文・タグに自然な形で盛り込むのが効果的です。特にタイトルには先頭に重要キーワードを置くと、クリック率の向上にもつながります。
動画が検索結果に表示されても、クリックされなければ意味がありません。そのためには、視認性の高いサムネイル画像と、内容を補完する字幕やキャプションが有効です。サムネイルはオリジナル画像を用意し、感情やキーワードが伝わるものにするのが理想です。字幕はSEOだけでなく、無音視聴やアクセシビリティにも貢献します。
動画コンテンツは、HTMLページ上に表示されているだけでは検索エンジンに正確に理解されづらいため、構造化マークアップを使って動画の情報を明示的に伝えることが推奨されます。
具体的には、Googleが推奨している VideoObject を使って、動画のタイトル、説明文、サムネイル、公開日、再生URLなどを記述します。これにより、Googleの検索結果でリッチスニペットとして表示されやすくなり、クリック率の向上も期待できます。
加えて、動画を多く扱うサイトでは、動画専用のサイトマップ（video sitemap）を作成し、Google Search Consoleを通じて送信することで、クローラーが動画コンテンツをより正確かつ迅速にインデックスできるようになります。
以下がコードの実装例です。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "HTMLで動画を埋め込む方法",
"description": "HTMLでvideoタグやiframeタグを使って動画を埋め込む方法を解説しています。",
"thumbnailUrl": "https://example.com/thumbnail.jpg",
"uploadDate": "2025-05-25",
"contentUrl": "https://example.com/videos/embed-guide.mp4",
"embedUrl": "https://example.com/embed/embed-guide.html"
}
</script>WebサイトやSNSからの被リンクは、検索エンジンにとって信頼性や人気のシグナルになります。動画を埋め込んだページに対して外部のブログ・ニュースサイト・SNSからリンクを得ることは、SEO効果を高める上で非常に重要です。また、動画を共有しやすい形式（QRコードや埋め込みコードなど）で提供することで、自然な拡散も促進されます。
このように、動画SEOは単なるキーワード設定にとどまらず、視覚設計、構造化、外部施策まで幅広い視点で最適化する必要があります。以上の施策を組み合わせて取り組むことで、より多くのユーザーに動画を届けることが可能になります。
Webサイトに埋め込んだ動画を、様々なブラウザやデバイスで正しく再生させるためには、マルチブラウザ対応が重要です。ここでは、videoタグとiframeタグ、それぞれの注意点と対応方法について解説します。
videoタグを利用する際には、ブラウザによって対応している動画形式が異なることに注意する必要があります。
主要なブラウザと対応する動画形式は以下の通りです。
＜ブラウザと対応する動画形式＞
| ブラウザ | 対応動画形式 |
|---|---|
| Google Chrome | MP4, WebM, Ogg |
| Firefox | MP4, WebM, Ogg |
| Safari | MP4, MOV |
| Edge | MP4, WebM, Ogg |
| Internet Explorer | サポート終了 |
すべてのブラウザで動画を再生できるようにするには、複数の動画形式を用意し、sourceタグを使って以下のように指定する必要があります。
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<p>お使いのブラウザはvideoタグに対応していません。</p>
</video>上記のように、sourceタグを複数指定することで、ブラウザは上から順に対応している動画形式を探し、再生します。
また、どの動画形式にも対応していないブラウザのために、<p>非対応の形式のため動画を再生できません。</p>などの代替テキストを表示させておくことも重要です。
iframeタグを利用する場合は、埋め込み元の動画共有サイトの仕様を確認する必要があります。
例えば、YouTubeでは以下のように記述し、allowfullscreen属性を指定することで、動画のフルスクリーン表示が可能になります。
<iframe width="560" height="315"
src="https://www.youtube.com/embed/動画ID"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>また、Vimeoでは以下のように記述し、playsinline 属性を追加することで、モバイル端末でもインライン再生を維持できます。
<iframe src="https://player.vimeo.com/video/動画ID"
width="640" height="360"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
playsinline
allowfullscreen>
</iframe>このように、使用する動画プラットフォームに応じて、必要な属性を正確に指定することで、ユーザー体験を向上させることができます。
Webサイトに動画を埋め込んだにもかかわらず、動画が再生されない場合があります。ここでは、動画が再生されない場合に確認すべきポイントと対処法について解説します。
動画が再生されない場合、まず確認すべきことは、HTMLコードの記述ミスです。特に、タグの閉じ忘れや、動画ファイルのパスの誤りは、よくあるミスです。
コードを注意深く確認し、記述ミスがないかチェックしましょう。
特定のブラウザやデバイスでのみ動画が再生されない場合は、ブラウザやデバイスの互換性の問題が考えられます。videoタグの場合は、複数の動画形式を用意し、sourceタグを使って指定することで、多くのブラウザに対応できます。
iframeタグの場合は、埋め込み元の動画共有サイトのヘルプページなどを確認し、対応ブラウザやデバイスを確認しましょう。
ブラウザに古いキャッシュやCookieが残っていると、動画が正常に再生されない場合があります。ブラウザのキャッシュとCookieをクリアすることで、問題が解決する可能性があります。
ブラウザの設定で、JavaScriptが無効になっていると、動画が再生されない場合があります。ブラウザの設定を確認し、JavaScriptが有効になっていることを確認しましょう。
また、ブラウザの拡張機能が、動画の再生を妨げている可能性もあります。拡張機能を一時的に無効化し、動画が再生されるかどうか確認してみましょう。
セキュリティソフトが、動画の再生をブロックしている可能性もあります。セキュリティソフトの設定を確認し、動画の再生を許可するように設定を変更しましょう。
本記事では、HTMLを使ってWebサイトに動画を埋め込む方法について、主に<video>タグと<iframe>タグの違いや使い分け方を解説しました。
videoタグは、動画ファイルを直接Webページに埋め込めるため、細かな再生設定が可能でカスタマイズ性に優れています。ただし、ファイルサイズやサーバー負荷に配慮が必要です。一方で、iframeタグはYouTubeなどの外部動画を簡単に挿入でき、サーバーへの負荷も少ない反面、サービス側の仕様変更に左右される可能性があります。
それぞれのタグは、動画の種類や運用目的に応じて使い分けることが重要です。また、controls や autoplay、loop などの設定も、見る人にとって快適な環境になるように調整しておくと安心です。
さらに、複数の動画形式に対応させるためのsourceタグの活用や、スマートフォンに対応したレスポンシブ設計、動画SEOによる検索流入の最大化も、効果的な動画運用には欠かせません。
HTMLでの動画活用を正しく理解し活用することで、Webサイトの表現力と訴求力を大きく高めることができるでしょう。
WEBでのお問い合わせはこちら
