HTML動画埋め込みのやり方と注意点｜videoタグ・iframe・YouTube対応ガイド

HTMLで動画をページに表示させたいけど、「どうやって埋め込めばいいの？」って迷うことありますよね。

タグの使い方や、動画のサイズ、表示されないときの対処法など、わからないことがたくさんあって不安になる人も多いと思います。

この記事では、「HTMLで動画を埋め込む方法」について、基本から注意点までわかりやすく紹介します。

<video>タグや<iframe>タグの使い方、よくあるトラブルの対処法まで、実際のコードと一緒に丁寧に説明します。

動画の正しい埋め込み方が分かれば、Webページをもっとかっこよく、使いやすくすることができますので、ぜひ最後まで読んで、あなたのサイトにも活かしてみてください。

HTMLで動画を埋め込む基本的な方法

videoタグを使った埋め込み方法

HTMLで自分のWebサイトに動画を埋め込みたいときは、<video>タグを使うのが基本です。

これはHTML5から使えるようになったタグで、直接動画ファイルをページに表示し、ユーザーが再生できるようにします。

使い方はとてもシンプルですが、いくつかのポイントを押さえることで、より快適に利用できます。

以下に、videoタグを使った基本的な使い方と重要なポイントを紹介します。

このように、<video>タグを使うことで、HTMLに動画を埋め込むことができます。

特に複数の動画形式を準備しておくことで、どんなブラウザでも正しく再生されやすくなります。

埋め込み時のファイル形式と対応ブラウザ

動画をWebページに埋め込むときは、動画のファイル形式に注意が必要です。

すべてのブラウザが同じ形式を再生できるわけではないので、複数の形式を用意することが大切です。

ここでは、主に使われる動画形式と、それぞれに対応しているブラウザの特徴を説明します。

そして、それぞれの形式を切り替えて再生できるようにするには、次のようなHTMLコードを使います。


<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
お使いのブラウザは動画に対応していません。

</video>

このように複数形式で用意することで、再生できない問題を避けやすくなります。

特定の形式に依存しない設計がとても大切です。

poster属性でサムネイルを設定する方法

HTMLで動画を埋め込むと、ページを開いたときに真っ黒な画面が表示されることがあります。

これを防ぐために便利なのがposter属性です。

この属性を使うと、動画が再生される前に好きな画像を表示させることができます。

使い方はとても簡単で、videoタグの中にposter="画像のURL"を追加するだけです。

たとえば次のように書きます。


<video controls poster="thumbnail.jpg">
<source src="sample.mp4" type="video/mp4">
</video>


このようにposter属性を使えば、見た目がグッと良くなり、ユーザーに興味を持ってもらいやすくなります。

自動再生・ループ・ミュートなどの属性設定

HTMLの<video>タグには、再生方法を調整するための便利な属性がいくつかあります。

これらを組み合わせることで、動画の動作をカスタマイズすることができます。

まずは代表的な属性を見てみましょう。

これらを組み合わせると、例えばこんなコードになります。


<video autoplay loop muted playsinline>
<source src="intro.mp4" type="video/mp4">
</video>


とくにスマホ対応や自動再生を考えるなら、mutedとplaysinlineはセットで使うのがポイントです。

ユーザーの操作なしで再生させたい場合に効果的です。

iframeタグを使った外部動画の埋め込み

HTMLに動画を埋め込む方法は<video>タグだけではありません。

YouTubeやVimeoなどの外部サービスの動画は、<iframe>タグを使って簡単に埋め込むことができます。

ここではYouTubeを例に、iframeでの埋め込み手順を紹介します。

実際のコードはこのようになります。


<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>


iframeでの埋め込みは、サーバーに動画ファイルを置かずにすむので、初心者にもおすすめの方法です。

再生プレイヤーも最初から整っているため、デザインの手間も少なく済みます。

動画のサイズ指定とレスポンシブ対応

動画を埋め込んだときに、パソコンではきれいに見えるけれどスマホでは見切れてしまう…そんなときはレスポンシブ対応が必要です。

HTMLとCSSを使って、どんな画面サイズでも動画をきれいに表示できるようにします。

まず、動画サイズの基本的な指定方法はwidthとheight属性ですが、固定サイズだとスマホで崩れることがあります。

そのため、次のようにCSSで対応するのが一般的です。


<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>


これを使えば、どんなデバイスでも動画が画面にぴったり表示されるようになります。

特にスマホユーザーが多いサイトでは、必ず対応しておきたいポイントです。

YouTubeやVimeoなど外部サービスの動画を埋め込む方法

iframeを使ったYouTube動画の埋め込み手順

YouTubeの動画を自分のWebページに埋め込みたい場合は、<iframe>タグを使う方法が基本です。

とても簡単な手順で埋め込めるので、初心者の方でも安心して使えます。

以下に、具体的なやり方をわかりやすく紹介します。

まずは埋め込むためのコードをYouTubeから取得しましょう。

この手順を踏むだけで、ページにYouTube動画を表示できます。

コード例はこちらです。


<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>


この方法を使えば、サーバーに動画ファイルをアップロードする必要がないので、ページの読み込みが軽くなり、管理もラクになります。

Vimeoの動画埋め込みとカスタマイズ方法

VimeoもYouTubeと同じく<iframe>で埋め込むことができますが、カスタマイズ性が高いのが特徴です。

自分のサイトに合うように、動画プレイヤーのデザインや再生設定を細かく調整できます。

以下のような手順でVimeo動画を埋め込みましょう。

コードの例はこちらです。


<iframe src="https://player.vimeo.com/video/動画ID" width="640" height="360" frameborder="0" allowfullscreen></iframe>


また、URLの末尾にクエリを付けて、以下のようなカスタマイズが可能です。

Vimeoは商用利用や画質の面でも優れているので、よりこだわった動画表示をしたい人に向いています。

各サービスの埋め込みコード取得方法

動画をWebサイトに貼り付けるには、各サービスから「埋め込みコード」を取得する必要があります。

サービスごとにボタンの場所や設定項目が少し違うため、正しく手順を知っておくことが大事です。

ここでは主要なサービスでの取得方法をわかりやすくまとめます。

どのサービスでも、取得した<iframe>タグをHTMLに貼り付ければ埋め込み完了です。

コードを改変しないように注意しながら、自分のデザインに合わせて使っていきましょう。

外部動画の埋め込み時の著作権と利用規約

外部サービスから動画を埋め込むのは簡単ですが、著作権や利用規約を守ることがとても大切です。

知らずに他人の動画を勝手に使ってしまうと、法的なトラブルになることがあります。

特に注意したいポイントを以下にまとめます。

もしも不安な場合は、自分がアップロードした動画だけを使うようにするのが安全です。

動画は著作物なので、正しい使い方を心がけましょう。

再生開始位置や画質の指定方法

YouTubeやVimeoなどの動画サービスでは、動画の再生開始位置を指定したり、画質を調整したりすることができます。

ちょっとした工夫で、見せたい場面をすぐ再生させることができるので便利です。

たとえばYouTubeでは、URLの末尾に?start=秒数をつけると、再生開始のタイミングを変えられます。

Vimeoでも似たように、URLにパラメータを追加して再生位置などを指定できます。

コード例を見てみましょう。


<iframe src="https://www.youtube.com/embed/動画ID?start=90&vq=hd1080" allowfullscreen></iframe>


このように、細かく指定できるとユーザーに見てもらいたいシーンだけをピンポイントで届けることができます。

特に商品の紹介やチュートリアル動画などでとても効果的です。

APIを使ったカスタム埋め込み方法

もっと細かく動画の動きをコントロールしたい場合は、YouTubeやVimeoのAPIを使う方法があります。

JavaScriptを使えば、再生ボタンを自分で作ったり、ページの動きと動画を連動させたりすることができます。

APIを使うと、以下のようなことができます。

YouTubeの場合、公式の「YouTube IFrame Player API」を使います。

簡単なサンプルコードはこちらです。


<script src="https://www.youtube.com/iframe_api"></script>
<div id="player"></div>
<script>
function onYouTubeIframeAPIReady() {
new YT.Player('player', {
videoId: '動画ID',
events: {
'onReady': function (event) { event.target.playVideo(); }
}
});
}
</script>


APIの利用にはプログラミングの知識が少し必要ですが、自由に動かしたい人にはとても役立つ機能です。

自分のサイトをもっとインタラクティブにしたい方におすすめです。

外部サービスを使う際のメリット・デメリット

外部動画サービスを使って動画を埋め込む方法には、多くのメリットがありますが、いくつかのデメリットもあります。

目的に合った方法を選ぶために、両方の特徴を知っておきましょう。

まずはメリットを紹介します。

次にデメリットです。

このように、外部サービスを使うことで手軽さと性能を得られますが、コントロールしにくい部分もあるという点に注意が必要です。

自分のサイトに合う方法をしっかり考えて選びましょう。

動画埋め込み時の注意点とSEOへの影響

ページ速度への影響と最適化方法

動画をWebページに埋め込むと、ページの表示速度が遅くなることがあります。

特に大きなサイズの動画や高画質な動画を複数表示すると、読み込みに時間がかかってしまい、ユーザーの離脱にもつながります。

動画埋め込みによる速度低下を防ぐためには、以下のような工夫が必要です。

これらの方法を使えば、ページ全体の速度が上がり、SEOやユーザー体験にも良い影響を与えることができます。

動画に適したファイル形式と圧縮方法

動画のファイル形式やサイズは、埋め込んだときの表示速度や再生安定性に関係してきます。

正しい形式を選び、適切に圧縮することが大切です。

ここでは、よく使われる動画形式と、その圧縮のコツを紹介します。

動画を軽くするためには、次のような圧縮方法があります。

これらの対策を行えば、ページがサクサク動いて離脱も減らせます。

SEOに有利な動画埋め込みの設定

動画をただ埋め込むだけでは、検索順位にはあまり効果がありません。

SEO効果を高めるには、いくつかの設定や工夫が必要です。

以下に、SEOに役立つ動画埋め込みのポイントをまとめました。

こうした工夫を取り入れることで、Googleに動画の価値が伝わりやすくなり、検索結果で上位に表示されやすくなります。

動画に関する構造化データの追加

動画の内容をGoogleにより正確に伝えるには、構造化データ（schema.org）を使うのが効果的です。

これにより、検索結果に「動画リッチリザルト」が表示されやすくなります。

動画に使う代表的な構造化データは「VideoObject」です。

以下に、基本的な記述例を紹介します。


<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "サンプル動画",
"description": "これは動画の説明です",
"thumbnailUrl": "https://example.com/thumb.jpg",
"uploadDate": "2024-06-01",
"contentUrl": "https://example.com/video.mp4",
"embedUrl": "https://example.com/embed.html"
}
</script>


このように設定することで、Googleが動画の内容を正しく読み取れるようになり、検索結果のクリック率も上がります。

モバイルフレンドリーな埋め込み設計

スマートフォンやタブレットでサイトを見るユーザーが増えている今、動画のモバイル対応はとても重要なポイントです。

画面サイズに合わせて動画が正しく表示されるようにしましょう。

以下のような方法でモバイルフレンドリーな設計ができます。

例として、以下のCSSとHTMLで対応できます。


<style>
.video-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-wrap">
<iframe src="動画URL" allowfullscreen></iframe>
</div>


このように作ることで、スマホでも見やすい動画ページが実現できます。

アクセシビリティ対応と字幕の付け方

動画を見る人の中には、音が聞こえにくい人や、言葉がわかりにくい人もいます。

誰でも安心して動画を楽しめるようにするためには、アクセシビリティへの配慮が必要です。

とくに字幕の追加は大切です。

以下のような方法で字幕を入れましょう。

コードの例はこちらです。


<video controls>
<source src="sample.mp4" type="video/mp4">
<track src="subtitles-ja.vtt" kind="subtitles" srclang="ja" label="日本語">
</video>


このように字幕をつけることで、より多くの人にとって見やすく親切な動画になります。

自動再生とユーザー体験のバランス

ページを開いたとたんに動画が再生されると、びっくりしてしまうユーザーもいます。

自動再生は便利な一方で、ユーザー体験を悪くすることもあるため、バランスを考える必要があります。

以下のような点を意識しましょう。

たとえば以下のように記述します。


<video autoplay muted loop playsinline>
<source src="auto.mp4" type="video/mp4">
</video>


このように、自動再生はうまく使えば便利ですが、やりすぎると逆効果になることもあるので注意が必要です。

ユーザーの立場で考えることが大切です。

動画埋め込み後のトラブル対策とメンテナンス

再生できない・表示されない場合の原因と対処法

動画を埋め込んだのにページで表示されなかったり、再生ボタンを押しても動かないことがあります。

こうしたトラブルはよくある問題ですが、原因を知っていればすぐに直すことができます。

主な原因とその対処法を以下にまとめます。

このように、チェックポイントを1つずつ確認することで、原因を特定しやすくなり、すばやく修正できます。

リンク切れや埋め込みコード変更のチェック方法

動画の埋め込みコードやリンク先が突然変わってしまうと、表示されなくなったり、404エラーが出たりすることがあります。

これを防ぐには定期的なチェックとメンテナンスが必要です。

以下のような方法でリンク切れを見つけて対策を取りましょう。

このようにしっかり管理していれば、いざというときの対応も早く、ユーザーに迷惑をかけずにすみます。

埋め込んだ動画の更新・差し替え方法

動画の内容が古くなったり、もっと質の良いバージョンを用意したいときは、埋め込んだ動画を新しいものに差し替える必要があります。

でも、HTMLでの差し替えはとても簡単です。

差し替えの方法は以下のようになります。

動画の差し替えをするときは、表示崩れや再生エラーがないかも確認することが大切です。

動画がページレイアウトを崩す時の対処法

動画のサイズが大きすぎたり、画面幅に合っていないと、ページ全体のレイアウトが壊れてしまうことがあります。

これを防ぐには、動画のサイズと位置をしっかり調整する必要があります。

次のような工夫で、見た目を整えることができます。

例として、以下のようなコードを使うと便利です。


<div style="max-width: 800px; margin: 0 auto;">
<video width="100%" controls>
<source src="video.mp4" type="video/mp4">
</video>
</div>


このようにすることで、どんなデバイスでも整った表示を保つことができます。

外部サービス側の仕様変更への対応

YouTubeやVimeoなどの外部サービスは、時々仕様が変更されます。

埋め込み方法が変わったり、古いコードが動かなくなることもあるので、注意が必要です。

仕様変更に備えるために、次のようなポイントを押さえておきましょう。

これらを意識しておけば、突然動画が表示されなくなってもすぐ対応できます。

セキュリティリスクと対策ポイント

動画を埋め込むときには、セキュリティの面でも注意が必要です。

特に外部サイトのiframeを使う場合は、知らないうちに悪意のあるスクリプトが入り込むこともあります。

以下のような対策をして、安全に動画を埋め込みましょう。

例として、次のようなiframeコードが安全です。


<iframe src="https://www.youtube.com/embed/動画ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


このように設定しておけば、ユーザーに安心して動画を見てもらえるページになります。

複数動画を埋め込む際のベストプラクティス

1ページにたくさんの動画を埋め込むと、表示が重くなったり、ユーザーが迷いやすくなります。

複数動画を載せるときは、見やすさと軽さのバランスを考えて設計することが大切です。

以下のようなポイントを守ると、うまくまとめられます。

このような工夫をすることで、ユーザーにとってわかりやすく、動作も軽いページを作ることができます。

動画を見てもらいやすくするには「見せ方」もとても大切です。

まとめ

これまで「HTML動画埋め込みの実践方法と注意点」について、基本から応用、そしてトラブル対策まで幅広く紹介してきました。

ここで大事なポイントをもう一度かんたんに整理します。

これらをしっかり押さえて、あなたのWebサイトにぴったりの動画埋め込みをぜひ実践してみてください。

動画を正しく使えば、ページの魅力がぐんとアップします！