HTMLで動画を埋め込む方法完全ガイド：YouTube、MP4、サイズ調整まで徹底解説



AIMOV（エアモブ）編集部です。ウェブサイトに動画を埋め込むことは、ユーザーエンゲージメントを高め、情報を効果的に伝えるための重要な手法です。しかし、HTMLで動画を埋め込む方法は様々で、特に初心者にとっては少し複雑に感じるかもしれません。この記事では、基本的な<video>タグの使い方から、YouTube動画の埋め込み、MP4ファイルの直接埋め込み、さらにはサイズ調整や再生オプションの設定まで、HTMLで動画を埋め込むためのあらゆる方法を網羅的に解説します。最新の動画埋め込みテクニックや、再生されない場合の対処法、iframeを使った埋め込みについても触れていきますので、ぜひ参考にしてください。

この記事のサマリー

  • HTMLの<video>タグや<iframe>タグを使った基本的な動画埋め込み方法を解説します。
  • YouTube動画（最新動画、ショート動画含む）やMP4ファイルをHTMLに埋め込む具体的な手順と注意点を説明します。
  • 動画のサイズ調整、自動再生、ループ設定、再生されない場合のトラブルシューティングなど、カスタマイズ方法を紹介します。

HTML動画埋め込みの基本：<video>タグを理解する

HTML 動画埋め込み 基本

ウェブページに動画ファイルを直接埋め込む最も基本的な方法は、HTML5で導入された<video>タグを使用することです。このタグにより、プラグインなしでブラウザがネイティブに動画を再生できるようになりました。基本的な構文は非常にシンプルです。

<video>タグの基本的な使い方

<video>タグを使用する最も簡単な例は以下のようになります。

<video src="movie.mp4" controls>
  お使いのブラウザはvideoタグをサポートしていません。
</video>

src属性で動画ファイルのURLを指定し、controls属性を追加することで、再生/一時停止、音量調整などの基本的なコントロールパネルが表示されます。<video>タグの間に記述されたテキストは、ブラウザが<video>タグに対応していない場合に表示されます。

さらに、異なるブラウザで再生互換性を高めるために、<source>タグを使って複数のフォーマットの動画ファイルを提供することが推奨されます。

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  お使いのブラウザはvideoタグをサポートしていません。
</video>

この例では、ブラウザは自身が対応している最初の<source>タグの動画ファイルを再生します。MP4、WebM、Ogg Theoraは、ウェブでよく使われる動画フォーマットです。type属性で動画のMIMEタイプを指定することが重要です。

対応ブラウザと注意点

現在、ほとんどのモダンブラウザ（Chrome, Firefox, Safari, Edgeなど）は<video>タグと主要な動画フォーマット（特にMP4/H.264）をサポートしています。しかし、古いブラウザや一部のモバイルブラウザでは対応状況が異なる場合があります。そのため、複数のフォーマットを用意するか、最も広くサポートされているMP4形式（H.264コーデック）を使用するのが一般的です。

また、動画ファイルは容量が大きくなる傾向があるため、ページの読み込み速度に影響を与える可能性があります。動画の最適化や遅延読み込みなどのテクニックを検討することが重要です。関連情報として、「動画の容量を小さくする方法完全ガイド！PC/スマホ/サイトで簡単圧縮【2025年最新】」の記事も参考になるでしょう。

YouTube動画を埋め込む方法：iframeが基本

YouTube 動画 埋め込み HTML

ウェブサイトに動画を追加する最も一般的な方法の一つが、YouTube動画の埋め込みです。YouTubeは動画ホスティングと配信のインフラを提供してくれるため、自身のサーバー負荷を心配する必要がありません。埋め込みは主に<iframe>タグを使用して行います。

iframeを使った標準的な埋め込み

YouTube動画を埋め込むためのHTMLコードは、YouTubeの動画ページから簡単に取得できます。

  1. 埋め込みたいYouTube動画を開きます。
  2. 動画プレーヤーの下にある「共有」ボタンをクリックします。
  3. 表示されるオプションから「埋め込む」を選択します。
  4. 表示された<iframe>コードをコピーします。
  5. コピーしたコードをウェブページのHTMLに貼り付けます。

取得できるコードは通常、以下のようになります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

src属性内の「動画ID」の部分には、各動画固有のIDが入ります。widthとheight属性で埋め込みプレーヤーのサイズを指定できます。iframeを使った埋め込みは非常に簡単で、多くのウェブサイトで採用されています。

埋め込みオプション（サイズ、自動再生など）

YouTubeの埋め込みコードは、src属性のURLにパラメータを追加することで、さらにカスタマイズできます。主なパラメータには以下のようなものがあります。

  • autoplay=1: ページ読み込み時に動画を自動再生します（ただし、多くのブラウザではミュート状態でのみ許可されます）。
  • loop=1&playlist=動画ID: 動画をループ再生します。loop=1だけでは機能せず、playlistパラメータに同じ動画IDを指定する必要があります。
  • controls=0: プレーヤーのコントロールバーを非表示にします。
  • start=秒数: 指定した秒数から動画の再生を開始します。
  • mute=1: 最初からミュート状態で再生します。

例えば、自動再生（ミュート）でループ再生させたい場合は、src属性を以下のように変更します。

src="https://www.youtube.com/embed/動画ID?autoplay=1&mute=1&loop=1&playlist=動画ID"

これらのパラメータを組み合わせることで、より意図に沿った動画埋め込みが可能になります。サイズ調整については、後述の「動画埋め込みのカスタマイズ」セクションで詳しく解説します。

最新動画やショート動画の埋め込みに関する注意点

特定のチャンネルの最新動画を自動的に埋め込みたい場合、YouTube APIを利用するか、サードパーティのツールを使う必要があります。標準のiframe埋め込みコードでは、特定の動画IDを指定する必要があるため、自動更新はできません。

YouTubeショート動画の埋め込みも、通常の動画と同様にiframeコードを取得して行えます。共有メニューから「埋め込む」を選択すれば、適切なコードが生成されます。ただし、ショート動画は縦型フォーマットであるため、埋め込み時のwidthとheightの比率を調整すると、より自然に見せることができます。例えば、width="315" height="560"のように縦長のサイズを指定します。YouTubeショートの作成方法については、「【2025年最新】YouTubeショート動画の作り方を徹底解説！PC/スマホアプリ・サイズ・コツまで網羅」が参考になります。

MP4など動画ファイルを直接埋め込む

MP4 動画 埋め込み HTML

YouTubeなどのプラットフォームを利用せず、自身のサーバーにアップロードしたMP4などの動画ファイルを直接ウェブページに埋め込みたい場合も、<video>タグを使用します。これにより、外部サービスに依存せず、より自由に動画の表示を制御できます。

<video>タグと<source>タグ

前述の通り、<video>タグと<source>タグを組み合わせることで、MP4ファイルを埋め込むことができます。

<video controls width="640" height="360" poster="posterimage.jpg">
  <source src="https://example.com/path/to/your/video.mp4" type="video/mp4">
  お使いのブラウザはvideoタグをサポートしていません。MP4動画の再生には対応ブラウザが必要です。
</video>

この例では、src属性に動画ファイルのURLを指定しています。poster属性を追加すると、動画が読み込まれる前や再生開始前に表示されるプレビュー画像を指定できます。ユーザーが再生ボタンを押す前に、動画の内容を示す静止画を表示できるため、設定することが推奨されます。

<source>タグを使えば、MP4以外のフォーマット（WebMなど）も代替として提供でき、ブラウザの互換性を高めることができます。

再生されない場合のトラブルシューティング

HTMLに埋め込んだMP4動画が再生されない場合、いくつかの原因が考えられます。

  1. ファイルパス/URLの間違い: src属性で指定した動画ファイルのパスやURLが正しいか確認してください。相対パスと絶対パスの指定にも注意が必要です。
  2. ファイル形式/コーデックの問題: ブラウザが動画のファイル形式（コンテナ）やコーデックに対応していない可能性があります。MP4コンテナでも、使用されているビデオコーデック（例: H.264, H.265/HEVC）やオーディオコーデック（例: AAC）がブラウザでサポートされているか確認が必要です。一般的に、H.264コーデックのMP4が最も互換性が高いです。
  3. サーバーの設定 (MIMEタイプ): 動画ファイルをホストしているウェブサーバーが、正しいMIMEタイプ（例: video/mp4）をレスポンスヘッダーで送信しているか確認してください。サーバーの設定が不適切だと、ブラウザはファイルを動画として認識できません。
  4. ファイルの破損: 動画ファイル自体が破損している可能性もあります。別のプレーヤーで再生できるか試してみてください。
  5. ブラウザの拡張機能や設定: 特定のブラウザ拡張機能が動画の再生を妨げている場合や、ブラウザの設定で動画再生が無効になっている可能性もあります。

これらの点を確認することで、多くの場合、再生されない問題は解決できます。

URL指定での埋め込み

<video>タグのsrc属性や<source>タグのsrc属性には、相対パスだけでなく、完全なURLを指定して動画を埋め込むことも可能です。これにより、別ドメインにある動画ファイルやCDN（コンテンツデリバリネットワーク）上の動画ファイルも埋め込むことができます。

<video controls>
  <source src="https://cdn.example.com/videos/tutorial.mp4" type="video/mp4">
  お使いのブラウザはvideoタグをサポートしていません。
</video>

CDNを利用すると、ユーザーに近いサーバーから動画を配信できるため、読み込み速度の向上やサーバー負荷の分散が期待できます。

動画埋め込みのカスタマイズ：サイズ、属性、レスポンシブ

HTML 動画 埋め込み サイズ

HTMLで動画を埋め込む際には、見た目や挙動を細かくカスタマイズすることが可能です。特に、表示サイズの調整やレスポンシブ対応は、様々なデバイスで適切に表示させるために重要です。

サイズ調整（width, height, レスポンシブ対応）

<video>タグや<iframe>タグには、width属性とheight属性を使って、埋め込む動画のサイズをピクセル単位で指定できます。

<video src="movie.mp4" controls width="640" height="360"></video>
<iframe width="640" height="360" src="..."></iframe>

しかし、固定のピクセル値で指定すると、スマートフォンのような小さい画面では動画がはみ出してしまったり、逆に大きな画面では小さすぎたりする問題が発生します。これを解決するのがレスポンシブ対応です。

CSSを使って動画をレスポンシブにする一般的な方法は、動画要素（またはそれを囲むコンテナ）に対してwidth: 100%;とheight: auto;を指定することです。

video, iframe {
  max-width: 100%; /* 親要素の幅を超えないようにする */
  height: auto;   /* 幅に合わせて高さを自動調整 */
}

YouTubeのiframeなど、アスペクト比を保ったままレスポンシブにしたい場合は、親要素にpadding-top（またはpadding-bottom）を使ってアスペクト比を維持するテクニックがよく用いられます。

<div class="video-container">
  <iframe src="..." frameborder="0" allowfullscreen></iframe>
</div>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 アスペクト比の場合 (9 / 16 * 100) */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

このCSSにより、iframeで埋め込んだ動画のサイズが親要素の幅に合わせて自動的に調整され、アスペクト比も維持されます。

コントロール、自動再生、ループなどの属性

<video>タグには、動画の再生動作を制御するための様々な属性が用意されています。

  • controls: 再生/一時停止、音量、フルスクリーンなどのコントロールを表示します。ユーザーが操作できるように、通常はこの属性を追加します。
  • autoplay: ページ読み込み時に動画の再生を自動で開始します。多くのブラウザでは、muted属性も同時に指定しないと自動再生されないポリシーになっています。
  • muted: 動画の音声を初期状態でミュートにします。autoplayと組み合わせて使われることが多いです。
  • loop: 動画の再生が終了したら、自動的に最初から再生を繰り返します。
  • preload: ページの読み込み時に動画ファイルをどのように読み込むかを指定します。
    • auto（デフォルト）: ブラウザが最適と判断する方法で動画全体を読み込むことがあります。
    • metadata: 動画のメタデータ（長さ、サイズなど）のみを読み込みます。
    • none: ユーザーが再生を開始するまで動画を読み込みません。サーバー負荷や帯域幅を節約したい場合に有効です。
  • poster="image.jpg": 動画が読み込まれる前や再生前に表示するプレビュー画像を指定します。

これらの属性を適切に設定することで、ユーザー体験を向上させることができます。例えば、背景動画として使用する場合は、autoplay loop muted playsinlineといった属性を組み合わせることがあります（playsinlineはiOS Safariでインライン再生するために必要です）。

その他のプラットフォーム動画の埋め込み（例: Twitter）

Twitter 動画 埋め込み HTML

YouTube以外にも、様々なプラットフォームが動画共有機能を提供しており、それらの動画をウェブサイトに埋め込むことができます。ここでは例としてTwitterの動画埋め込みを取り上げます。

Twitter動画の埋め込み方法

Twitterの動画（または動画付きツイート）を埋め込むには、Twitterが提供する埋め込みコードを使用するのが最も簡単です。

  1. 埋め込みたい動画が含まれるツイートを表示します。
  2. ツイートの右上にある「…」（もっと見る）アイコンをクリックします。
  3. メニューから「ポストを埋め込む」または「Embed Post」を選択します。
  4. 表示されるコード（通常は<blockquote class="twitter-tweet">...</blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>のような形式）をコピーします。
  5. コピーしたコードをウェブページのHTMLに貼り付けます。

このコードを貼り付けると、ツイート全体がカード形式で表示され、その中に動画プレーヤーが含まれます。Twitterのスクリプト（widgets.js）が自動的にツイートの内容を読み込み、整形して表示してくれます。

注意点として、この方法では動画だけを単独で埋め込むのではなく、ツイート全体のコンテキストと共に埋め込まれる形になります。また、Twitterの動画保存に関しては、「Twitter動画保存方法を徹底解説！安全なアプリ・サイトランキング【2025年最新】iPhone/Android/PC対応」で詳しく解説しています。

各プラットフォームの埋め込みコード取得方法

Vimeo、Facebook、Instagram、TikTokなど、他の多くのプラットフォームも同様に、共有メニュー内に「埋め込み」や「Embed」といったオプションを用意しています。基本的な手順はYouTubeやTwitterと似ており、共有機能から埋め込み用のHTMLコード（多くは<iframe>や特定のスクリプトタグ）を取得し、自分のウェブサイトに貼り付けるだけです。

各プラットフォームのドキュメントやヘルプページを参照すると、より詳細な埋め込みオプションやカスタマイズ方法が見つかる場合があります。プラットフォーム指定の埋め込みコードを利用することで、デザインの統一性や再生の安定性が保たれるメリットがあります。

HTML動画埋め込みのベストプラクティスとSEO

動画を効果的に埋め込むだけでなく、ウェブサイト全体のパフォーマンスやSEO（検索エンジン最適化）への影響も考慮することが重要です。

パフォーマンスへの影響と最適化

動画ファイルは一般的にサイズが大きいため、ページの読み込み速度（表示速度）に大きな影響を与える可能性があります。パフォーマンスを最適化するためには、以下の点を考慮しましょう。

  • 適切なファイル形式とコーデックの選択: WebMやMP4 (H.264)など、圧縮効率が高く、広くサポートされている形式を選びます。
  • 動画の圧縮: 品質を損なわない範囲で動画ファイルを圧縮し、ファイルサイズを小さくします。「動画の容量を小さくする方法」も参照してください。
  • preload属性の適切な設定: preload="metadata"やpreload="none"を設定し、不要なデータの読み込みを防ぎます。
  • 遅延読み込み (Lazy Loading): ユーザーが動画の表示領域までスクロールしたときに初めて動画を読み込むようにします。JavaScriptライブラリやloading="lazy"属性（iframeやimgで対応）を利用します。
  • CDNの利用: 動画ファイルをCDNから配信することで、読み込み速度を向上させ、サーバー負荷を軽減します。
  • poster属性の設定: プレビュー画像を表示することで、動画本体の読み込みが完了するまでの間、ユーザーに視覚的なフィードバックを与えます。

これらの最適化を行うことで、ユーザー体験を損なわずに動画コンテンツを提供できます。

アクセシビリティへの配慮

すべてのユーザーが動画コンテンツにアクセスできるように、アクセシビリティにも配慮する必要があります。

  • キャプションと字幕の提供: 聴覚障がいのあるユーザーや、音を出せない環境で視聴しているユーザーのために、キャプション（話されている内容のテキスト）や字幕（翻訳テキスト）を提供します。<video>タグには<track>タグを使ってWebVTT形式のファイルを追加できます。
  • トランスクリプト（文字起こし）の提供: 動画の内容をテキスト形式で提供することで、視覚障がいのあるユーザーがスクリーンリーダーで内容を理解したり、検索エンジンが内容をインデックスしやすくなったりします。
  • キーボード操作の確保: controls属性を有効にすることで、マウスを使えないユーザーもキーボードで動画プレーヤーを操作できるようになります。
  • 自動再生の抑制: 特に音声付きの動画の自動再生は、ユーザーを驚かせたり、スクリーンリーダーの読み上げを妨げたりする可能性があるため、避けるか、デフォルトでミュートにする（muted属性）べきです。

アクセシビリティを高めることは、より多くのユーザーにコンテンツを届けるだけでなく、SEOにも間接的に良い影響を与える可能性があります。

SEOにおける動画の役割

動画コンテンツは、ユーザーの滞在時間を延ばし、エンゲージメントを高める効果があるため、SEOにおいても重要視されています。検索エンジン（特にGoogle）は、動画の内容を理解し、検索結果に表示しようと努めています。

  • 構造化データのマークアップ: Schema.orgのVideoObjectタイプなどの構造化データを使用して、動画のタイトル、説明、サムネイルURL、アップロード日、長さなどの情報を検索エンジンに明確に伝えることが非常に重要です。これにより、Google検索の動画リッチリザルトに表示される可能性が高まります。
  • 動画サイトマップの作成: 動画コンテンツが多い場合は、動画サイトマップを作成し、Google Search Console経由で送信することで、検索エンジンによる動画の発見とインデックス登録を助けます。
  • 関連性の高いテキストコンテンツ: 動画を埋め込むページには、動画の内容と関連性の高いテキストコンテンツ（タイトル、説明、トランスクリプトなど）を含めることが重要です。これにより、検索エンジンが動画の文脈を理解しやすくなります。
  • 魅力的なサムネイル: poster属性や構造化データで指定するサムネイル画像は、検索結果やSNSでのクリック率に影響するため、魅力的で内容を表すものを選びましょう。

適切に最適化された動画埋め込みは、ウェブサイトのSEOパフォーマンス向上に貢献します。動画編集や制作自体に興味がある方は、「【2025年最新】動画編集の始め方完全ガイド！無料ソフト/アプリからAI活用までPC・スマホ別に解説」や「YouTube動画編集ソフト選びガイド：初心者からプロまで使える無料・有料ツール比較」もご覧ください。

コメント

タイトルとURLをコピーしました