HTMLで動画を埋め込む方法｜video・iframeタグと自動再生設定の解説

「動画をホームページに入れたいけど、どうやってやるのか分からない…」って悩むことありますよね。

タグやコードって聞くだけでちょっとむずかしそうに感じるかもしれませんが、大丈夫です。

この記事では、HTMLで動画を埋め込む方法と、自動再生の設定方法についてわかりやすく説明していきます。

YouTubeやVimeoなどの外部サービスの使い方も紹介しますので、自分のページにピッタリのやり方がきっと見つかります。

これを読めば、あなたのWebページに動画をかんたんに表示できるようになり、見た人にもわかりやすく楽しいページが作れるようになります。

ぜひ最後まで読んで、あなたのサイトづくりに役立ててください。

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

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

HTMLで動画を埋め込むときに最もよく使われるのが<video>タグです。

このタグを使えば、パソコンやスマートフォンのブラウザでもそのまま再生できる動画を表示できます。

以下に基本的な使い方を紹介します。


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


この例では、「sample.mp4」という動画ファイルをページ上に表示し、再生・一時停止などの操作ができる「コントロールバー」が表示されます。

<video>タグには、さまざまな属性を設定できます。

以下に代表的なものを紹介します。

このように<video>タグはとても便利で、ブラウザ上で直接動画を再生できるようになります。

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

外部サイトの動画を埋め込むときによく使うのが<iframe>タグです。

特にYouTubeなどの動画サービスでは、この方法が一般的です。

使い方はとても簡単です。


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


このコードでは、YouTubeの「動画ID」の部分を置き換えるだけで、ページに動画を表示できます。

iframeを使うメリットは以下の通りです。

ただし、埋め込み元が読み込めないと動画が表示されないという注意点もあります。

埋め込み時に使用する属性の解説

動画タグにはさまざまな属性があり、それぞれに意味があります。

これらを正しく使えば、より快適な再生環境を作ることができます。

まずは基本的な属性について見てみましょう。

これらの属性をうまく組み合わせることで、ユーザーが快適に動画を見ることができるようになります。

対応する動画ファイル形式と拡張子

HTMLで動画を再生するには、使うファイル形式にも気をつける必要があります。

すべてのブラウザが同じ形式に対応しているわけではないからです。

ここでは、よく使われる動画形式を紹介します。

動画を埋め込むときは、複数の形式を用意することで、どんな環境でも再生できるようになります。

動画の表示サイズを調整する方法

動画のサイズは、見やすさやレイアウトに大きく関わるポイントです。

<video>タグや<iframe>タグにはwidthとheight属性を指定することでサイズを変えられます。

例えば、以下のように書くことで横幅を600px、高さを400pxに設定できます。


<video src="sample.mp4" width="600" height="400" controls></video>


CSSでサイズを制御することもできます。


video { max-width: 100%; height: auto; }


このようにすることで、画面の幅に応じて動画サイズが変わるようになります。

これはレスポンシブ対応にもつながるので、非常に重要なポイントです。

動画を自動再生させる設定方法

autoplay属性の基本的な使い方

HTMLで動画を自動再生させるためには、<video>タグにautoplay属性を追加します。

これにより、ページを読み込んだときに自動で動画が再生されるようになります。

ただし、すべてのブラウザでこの機能がそのまま動作するとは限りません。

基本的な書き方は次のようになります。


<video src="sample.mp4" autoplay controls></video>


最近のブラウザでは、音声付きの動画が自動再生されないことが多いため、autoplayを使うときはmuted属性も一緒に設定するのが一般的です。


<video src="sample.mp4" autoplay muted controls></video>


このように設定すれば、多くの環境で自動再生されるようになります。

自動再生とミュートの関係

最近のスマートフォンやPCブラウザでは、音が出る動画を勝手に再生しないようになっています。

そのため、自動再生を成功させるためには、音をミュートにする必要があります。

その理由とポイントを以下にまとめます。

ユーザーにとって自然で心地よい動画再生を目指すことが、今のWeb設計ではとても大切です。

スマートフォンやブラウザ別の挙動

動画の自動再生は、使っているブラウザやスマートフォンの種類によって動きが異なります。

うまく再生されないことがあるため、それぞれの特徴を知っておく必要があります。

ここでは代表的なブラウザとその特徴を紹介します。

このように、同じHTMLでも端末によって動作が違うため、テストはとても重要です。

JavaScriptを使った自動再生の実装例

HTMLだけではうまく自動再生できないとき、JavaScriptを使って動画の再生をコントロールすることができます。

これにより、より細かく制御できるようになります。

以下はJavaScriptで自動再生を行うサンプルです。


<video id="myVideo" src="sample.mp4" muted></video>
<script>
window.addEventListener('load', function() {
document.getElementById('myVideo').play();
});
</script>


このスクリプトは、ページが読み込まれたタイミングで動画を再生するものです。

ただし、ブラウザのポリシーによってはこれでも再生されないことがあるため、必ずmuted属性を付けるようにしましょう。

自動再生がブロックされる原因と対策

動画が自動再生されない場合、いくつかの原因があります。

それぞれの原因に対して、正しい対処法を知ることが大切です。

代表的な原因とその対策を紹介します。

これらの対策を行うことで、自動再生が正しく機能する確率を高めることができます。

ユーザー体験を損なわない自動再生の工夫

動画を自動再生させるときは、ユーザーが不快に感じないようにする工夫も大切です。

ただ再生されれば良いというわけではありません。

ユーザー体験をよくするための工夫をいくつか紹介します。

これらを意識することで、動画の自動再生がユーザーにとって迷惑ではなく、自然な体験として受け入れられるようになります。

SEOへの影響と考慮すべきポイント

動画を埋め込むことでSEOにも良い影響がありますが、自動再生にはいくつかの注意点があります。

Googleの検索エンジンは、ユーザーにとって役立つ体験を評価しています。

以下のポイントを考慮することで、SEOにも配慮した動画設計が可能になります。

動画を自動で再生させたいときは、SEOにも配慮しながら、ユーザーに優しい設計を心がけましょう。

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

YouTube動画の埋め込み手順とカスタマイズ

YouTubeの動画をHTMLページに埋め込むには、<iframe>タグを使います。

これはとても簡単で、YouTube側が用意している「共有」機能からコードをコピーして貼り付けるだけで表示できます。

以下に基本的な埋め込みコードを紹介します。


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


このコード内の「動画ID」はYouTubeのURL末尾にある文字列に置き換えて使います。

また、少しだけカスタマイズを加えると便利です。

こうしたオプションを使えば、見せたい形に合わせて動画の動きをコントロールできます。

Vimeo動画を埋め込む方法と特徴

Vimeoも人気の動画サービスで、プロフェッショナルな用途によく使われます。

YouTubeと同じく<iframe>タグで簡単に埋め込むことができます。

基本の埋め込みコードはこちらです。


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


Vimeoは細かなデザイン設定ができるのが特長です。

以下のようなオプションがあります。

Vimeoは画質が高く、広告表示もないため、落ち着いたページ作りに向いています。

外部サービスの再生オプション設定

外部サービスで提供される動画は、URLにパラメータを追加することで再生の動きや見た目を変えることができます。

ここではよく使われる再生オプションを紹介します。

以下のようにURLの末尾に「?」を付けてオプションを追加していきます。


https://youtube.com/watch?v=%E5%8B%95%E7%94%BBID%3Fautoplay%3D1%26mute%3D1


それぞれのオプションの意味は以下のとおりです。

これらを組み合わせることで、ユーザーにとってわかりやすく快適な動画表示が可能になります。

埋め込みURLとiframeの使い分け

動画を埋め込むときには、「埋め込みURL」と「iframeタグ」をどう使い分けるかがポイントになります。

見た目や機能、ページの目的に合わせて選びましょう。

以下にそれぞれの特徴をまとめます。

使い分けのポイントは以下の通りです。

ユーザーの動きに合わせて、最適な形式を選ぶことが大切です。

著作権や埋め込み利用規約への注意点

動画をWebサイトに埋め込むときには、著作権や利用規約にも注意しなければなりません。

たとえYouTubeに公開されている動画でも、勝手に使うとルール違反になることがあります。

以下の点に気をつけて埋め込みを行いましょう。

問題が起きないように、動画の出典や出所をきちんと確認することが大切です。

再生ボタンやコントロールの非表示設定

動画を目立たせたくない場面や、特定のデザインに合わせたいときには、再生ボタンやコントロールを非表示にしたいことがあります。

その場合、YouTubeやVimeoのURLに特別なオプションを追加します。

代表的な非表示オプションは以下のとおりです。

こうすることで、ページ全体のデザインを壊さずに動画を埋め込むことが可能になります。

外部動画のレスポンシブ対応方法

動画をスマートフォンやタブレットでもキレイに見せるには、レスポンシブ対応が欠かせません。

普通に埋め込むだけだとサイズが固定されてしまい、画面に合わないことがあります。

レスポンシブ対応には、CSSでiframeを囲む方法がよく使われます。


<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe src="https://www.youtube.com/embed/動画ID" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen></iframe>
</div>


この方法なら、どの画面サイズでも動画がちょうどよく表示されます。

モバイルファーストの今、レスポンシブ対応は必須です。

トラブル対処と埋め込み後のチェックポイント

動画が表示されない時の原因と解決策

動画を埋め込んだのに表示されないことがあります。

これはよくあるトラブルですが、原因を知れば簡単に直せます。

まず確認すべきポイントを紹介します。

以下のような理由で動画が表示されないことがあります。

一つずつ確認していけば、多くの場合すぐに解決できます。

音声が再生されない・自動再生されない場合

ページが表示されたのに音が出なかったり、自動再生がうまくいかないときがあります。

これはブラウザや設定の影響で起こります。

以下に考えられる原因と対応策をまとめます。

これらを確認して設定を調整すれば、スムーズに動画が再生できるようになります。

スマホやタブレットで再生されない場合の対応

パソコンでは再生できるのに、スマートフォンやタブレットでは再生できないというケースもあります。

これはモバイル端末の仕様や設定の違いによるものです。

原因と対策を以下にまとめます。

スマホでも見やすいように、ファイル形式やサイズ、レスポンシブ対応を意識することが大切です。

ブラウザ間の互換性とテスト方法

動画があるページは、どのブラウザでも同じように見えるとは限りません。

各ブラウザで動きが違うこともあるため、事前にテストすることが必要です。

互換性を確かめるためのチェックポイントは次のとおりです。

これらを丁寧にテストしておくことで、すべてのユーザーが快適に動画を見られるようになります。

動画の遅延読み込みで表示速度を改善

動画はファイルサイズが大きいため、読み込みが遅いとページの表示速度にも影響します。

ページが重くなるのを防ぐために「遅延読み込み（Lazy Load）」の設定を使うと効果的です。

遅延読み込みのメリットと設定方法を紹介します。

設定例は以下のようになります。


<iframe loading="lazy" src="https://www.youtube.com/embed/動画ID"></iframe>


このloading="lazy"を追加するだけで、動画の読み込みタイミングが最適化され、サイト全体のパフォーマンスもアップします。

HTMLエラーや記述ミスの確認方法

動画が表示されない原因のひとつに、HTMLの記述ミスがあります。

閉じタグの抜けや属性の誤記などがあると、動画が正しく表示されません。

以下の点を確認するとミスを見つけやすくなります。

少しの記述ミスでも動画が表示されなくなることがあります。

コードチェックツールを使うと安心です。

ユーザビリティとアクセシビリティの向上対策

動画を見やすく、使いやすくするためには、ユーザビリティ（使いやすさ）とアクセシビリティ（誰でも使えること）を意識した設計が必要です。

これにより、多くの人が不便なく動画を楽しめるようになります。

改善のポイントは以下の通りです。

これらを意識することで、すべてのユーザーに優しい動画ページを作ることができます。

まとめ

これまで紹介してきた「HTMLで動画を埋め込む方法」や「自動再生の設定」は、サイト作りでとても役に立つ内容ばかりです。

最後に、大切なポイントを簡単にふりかえってみましょう。

今日学んだ内容を使って、あなたのWebページにも動画をかっこよく・わかりやすく埋め込んでみましょう！