HTMLにYouTube動画を埋め込む方法|サイズ調整や自動再生などのパラメータ設定までを徹底解説！
生徒ペン博士！HTMLにYoutube動画を埋め込みたいのですが、どうすればいいですか…
ペン博士Youtube動画を埋め込む方法じゃな！パラメータを追加して自由にカスタマイズする方法を解説するからよーく聞いておくんだぞ！
生徒ありがとうございます！
「YouTube動画をブログやサイトに埋め込みたい」「サイズ調整や自動再生、レスポンシブ対応の方法がわからない」そんなお悩みはありませんか？
本記事では、HTMLを使ったYouTube動画の埋め込み方法から、パラメータで自在にカスタマイズする手順までをわかりやすく解説します。読み終えるころには、サイトに最適な形で動画を設置し、見やすく効果的なコンテンツを作れるようになるでしょう。
詳しくはこちらの記事をご覧ください。
あわせて読みたい
【学生さん必見】大学生ながら案件を完走！案件を経験した後の活動状況もお聞きしました！
ペン博士！大学生ながら案件をこなした方がいるって聞いたんですけど本当ですか？ うむ、本当じゃ。わしが運営しておるプログラミングスクールの受講生じゃ。そして、そ...
橋本さんの主な制作実績はこちら
目次
HTMLにYouTube動画を埋め込む方法
ホームページにYouTube動画を埋め込むことで、文章や画像だけでは伝えきれない情報をわかりやすく届けることができます。ここではYouTubeの「埋め込みコード」を使った基本的な設置方法を紹介します。WordPressはもちろん、HTMLで作られた多くのページに対応可能な方法です。
STEP
埋め込み対象のYouTube動画にアクセスし、
「共有」をクリック
「共有」をクリック
STEP
「埋め込み」をクリック
STEP
埋め込みコードをコピー
STEP
埋め込みコードを貼り付けて完了
埋め込むYouTube動画にパラメータを追加する方法
ペン博士ここでは、YouTube動画の埋め込みURLにパラメータを追加する方法を紹介するぞ！サイズの変更や自動再生、ループ再生など、さまざまなカスタマイズができるんじゃ。
動画のサイズを変更する
埋め込みコードの width（横幅）と height（縦幅）を編集することで、表示サイズを自由に調整できます。YouTube動画の場合は、縦横比が16:9になるよう設定しましょう。ショート動画は9:16が適切です。
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR"
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>実装結果
自動再生させる（autoplay）
ページ読み込みと同時に再生させたい場合は、URLの末尾に 「autoplay」 パラメータを追加します。さらに 「mute」 パラメータを加えると音声オフにした状態で再生できます。
自動再生＆ミュートオフの場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&autoplay=0&mute=0"
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>実装結果
自動再生＆ミュートオンの場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&autoplay=1&mute=1"
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>実装結果
終了時に他の動画を自動再生する（playlist）
動画終了後に別の動画を自動再生させたい場合は、「playlist」パラメータを使用します。VIDEO_IDを入力することで指定した動画が再生されます。カンマで区切ることで複数の動画を指定することが可能です。
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&playlist=IqKz0SfHaqI,4Jg056aFaP8"
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>実装結果
繰り返し再生させる（loop）
同じ動画を繰り返し再生するには、「loop」 と 「playlist」パラメータを組み合わせて使用します。VIDEO_IDはURL末尾にある英数字の部分です。
ループ再生オフの場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&loop=0&playlist=IqKz0SfHaqI"
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>実装結果
ループ再生オンの場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&loop=1&playlist=IqKz0SfHaqI"
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>実装結果
開始位置と終了位置を指定する（start,end）
開始位置と終了位置を指定する場合は、 「start」 と 「end」パラメータを使用します。これにより、再生を特定の時間から始めたり、途中で終了させたりできます。
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&start=10&end=20"
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>実装結果
関連動画をご自身のチャンネルのみにする（rel）
YouTube動画は、再生終了後に関連動画が表示されます。再生後に他チャンネルの動画を表示させたくない場合は、「rel」 パラメータを使用します。
関連動画をご自身のチャンネルのみにする場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&rel=0"
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>実装結果
関連動画を表示させる場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&rel=1"
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>実装結果
コントロールバーの表示/非表示を設定する（controls）
動画プレイヤーの操作ボタンやシークバーを非表示にするには 「controls」パラメータを使用します。
コントロールバー非表示の場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&controls=0"
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>実装結果
コントロールバーを表示した場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&controls=1"
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>実装結果
全画面表示ボタンの表示/表示を設定する（fs）
全画面表示ボタンを非表示にしたい場合は 「fs」パラメータを使用します。
全画面表示ボタン非表示の場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&fs=0"
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>実装結果
全画面表示ボタンを表示させた場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&fs=1"
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>実装結果
YouTube動画をレスポンシブ対応で埋め込む
標準の埋め込みコードでは width と height が固定値のため、バイスの画面幅に応じた自動調整が行われません。その結果、スマホでは動画が画面からはみ出したり、小さすぎて見づらくなります。この問題を解決するには、CSSでアスペクト比を保ったまま横幅を可変にする設定が必要です。
以下のように style 属性で設定することで、画面幅が変わっても常に16:9の比率を維持できます。
<div style="position:relative; padding-bottom:56.25%; height:0;">
<iframe
style="position:absolute; top:0; left:0; width:100%; height:100%;"
src="https://www.youtube.com/embed/IqKz0SfHaqI?si=53TPFvAsme7xZjSR"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; pict_ure-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</div>実装結果
iOS端末でインライン再生する（playsinline）
iPhoneやiPadなどのiOS端末では、動画が自動的に全画面で再生されることがあります。これを防ぎ、ページ内（インライン）で再生させたい場合は 「playsinline」 パラメータを使用します。
特にモバイルで「autoplay」 を使う場合、自動再生が動作しないケースが多いため、幅広いユーザーに利用してもらうためにも必須の設定です。
全画面の場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&autoplay=1&mute=1&playsinline=0"
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 playsinline>
</iframe>実装結果
インラインの場合
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IqKz0SfHaqI?
si=53TPFvAsme7xZjSR&autoplay=1&mute=1&playsinline=1"
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 playsinline>
</iframe>実装結果
YouTube動画を埋め込み際の注意点
ペン博士ここではYouTube動画を埋め込む際に、特に注意すべき3つのポイントを紹介するぞ！事前に理解しておけば、思わぬトラブルを回避することができるぞ！
ページ表示速度への影響
動画は画像よりもデータ量が大きく、ページの読み込み速度低下につながります。特に1ページに複数の動画を埋め込む場合は、負荷が高まります。
WordPress 5.5以降では遅延読み込み（Lazy Load）が標準で有効ですが、複数動画の同時再生や自動再生設定には注意が必要です。
著作権の配慮
YouTube動画を埋め込む際は、必ず著作権者が公開を許可している動画を使用しましょう。
違法にアップロードされた動画や、埋め込みが制限されている動画は、著作権侵害になる恐れがあります。
こちらは、YouTube利用規約の一部です。
他のユーザーへのライセンス付与
（引用元：YouTube利用規約）
また、お客様は、本サービスを利用する他の各ユーザーに対して、本サービスを通じてコンテンツにアクセスし、（動画の再生や埋め込みなど）本サービスの機能によってのみ可能な方法で、複製、配信、派生的著作物の作成、展示、上演などのかたちでコンテンツを使用する世界的、非独占的な無償ライセンスを付与するものとします。明確にするために付記すると、このライセンスは、本サービスから独立した方法でコンテンツを使用する権利や権限を与えるものではありません。
表示サイズの確認
動画が大きすぎるとページデザインが崩れ、小さすぎると視聴しづらくなります。表示環境やデバイスに応じてサイズを設定し、レスポンシブ対応を確認してから公開しましょう。
生徒ペン博士、YouTube動画を埋め込む方法が理解できました。パラメータで自由に調整もできるんですね！
ペン博士うむ、これらをしっかり理解して今後のWebサイト制作に生かすんじゃぞ！
生徒ありがとうございます！注意点を守って、この学びを今後のWebサイト制作に役立てます！
まとめ
HTMLでのYouTube動画埋め込み方法と注意点を以下にまとめます。
主な内容
YouTubeの埋め込みコードを取得し、HTMLやWordPressに簡単に動画を追加できる
パラメータを使ってサイズ変更、自動再生、ループ再生など自由に調整できる
活用時の注意点
複数動画の埋め込みは表示速度低下の原因になる
著作権を守り、埋め込みが許可された動画のみ使用する
デザインを崩さないサイズとレイアウトで表示を確認する
これらのポイントを押さえることで、意図したデザインを保ちながら、効果的にYouTube動画を埋め込めるようになるでしょう。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
