2022年現在Webサイトのコンテンツには、テキストと画像の他にYouTubeのような動画を埋め込んだコンテンツがあります。YouTube動画を使ったコンテンツは今後も増えていくので、Webサイトに動画を埋め込む方法を習得しましょう。
この記事では、「WebサイトにYouTube動画を埋め込む方法」について解説します。
- WebサイトにYoutube動画を埋め込む方法
プログラミング学習でこのような経験はありませんか？ これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。 少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
ただし、無料サービスの提供には参加者の数に制限があります。
YouTubeを埋め込むメリット
WebサイトにYouTubeを埋め込むメリットとしては以下のものが考えられます。
- 自社メディアでYouTubeを扱っているところでも対応できる
- 動画を埋め込んだコンテンツが流行っているので、柔軟に対応できるようになる
WebサイトにYoutube動画を埋め込む手順
WebサイトにYouTube動画を埋め込む方法については、まずはこちらの動画をご覧ください。
なお、動画の中で使用しているYouTubeは「（株）Dct代表 島田晴香（元AKB48）が30日間プログラミングに挑戦！！」となっております。
YouTube動画埋め込み手順
動画を埋め込む手順としては次のとおりです。
- 埋め込むYouTube動画を開く
- タイトル下部の「共有」をクリック
- モーダルウィンドウが開いたら、「埋め込む」をクリック
- <iframe>タグのコードが出てくるので、「コピー」をクリック
- テキストエディタにコードを貼り付け
- CSSでスタイル調整
YouTubeを開き、共有をクリック
埋め込みたい動画を開いたら、タイトル下部の「共有」をクリックしましょう。
モーダルウィンドウが開いたら、「埋め込む」をクリック
共有ボタンをクリックすると、モーダルウィンドウが開きます。
いくつかのメニューが出てきますが、ここでは「埋め込む」をクリックします。
コピー
するとiframeタグのコードが動画の右側に出力されるので、それをコピーします。
テキストエディタに貼り付けそして、コピーしたコードをVSCodeなどテキストエディタのHTMLファイルに貼り付けます。
CSSでスタイルを調整CSSでスタイルを調整します。
レスポンシブの調整については、次のセクションで解説します。
埋め込んだYoutube動画のレスポンシブ対応方法
コピーしたコードをそのまま埋め込んでブラウザに表示することはできますが、現状ではレスポンシブ対応になっていません。
<iframe width="560" height="315" src="https://www.youtube.com/embed/l-wLsv8s-9Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>出力結果（レスポンシブ調整前）
レスポンシブ対応するためには、次のように記述します。
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/l-wLsv8s-9Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>.video {
width: 100%;
position: relative;
padding-top: 56.25%;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
出力結果（レスポンシブ調整後）
iframeタグ自体はそのままで、iframeタグの周りをvideoクラスがついたdivタグで囲います。そしてCSSでvideoタグとiframeタグにスタイルを適用しています。動画の縦横比を調整するためにpadding-top: 56.25%;を適用しています。
YouTube埋め込み設定について
YouTube動画の埋め込み設定の際にパラメーターを記述してカスタマイズすることができます。ここでは「自動再生」と「ループ再生」について解説します。
自動再生
自動再生する場合は、srcのURLに「?autoplay=1」を追記します。
<iframe width="560" height="315" src="https://www.youtube.com/embed/l-wLsv8s-9Q?autoplay=1" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>〇 自動再生設定追記前
src="https://www.youtube.com/embed/l-wLsv8s-9Q"
〇 自動再生設定追記後
src="https://www.youtube.com/embed/l-wLsv8s-9Q?autoplay=1"
ループ再生ループ再生する場合は、srcのURLに「?loop=1&playlist=動画ID」を追記します。
動画IDはURL最後の部分になります。src="https://www.youtube.com/embed/l-wLsv8s-9Q の太字の部分が動画IDです。
<iframe width="560" height="315" src="https://www.youtube.com/embed/l-wLsv8s-9Q?loop=1&playlist=l-wLsv8s-9Q" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>〇 ループ再生設定追記前
src="https://www.youtube.com/embed/l-wLsv8s-9Q
〇 ループ再生設定追記後
src="https://www.youtube.com/embed/l-wLsv8s-9Q?loop=1&playlist=l-wLsv8s-9Q"
まとめ
YouTube動画の埋め込み方法とレスポンシブ対応について解説しました。動画コンテンツを埋め込んだWebサイトは増えているので、扱えるようになりましょう。
YouTube動画埋め込みまとめ
- YouTube動画タイトル下部の共有ボタンからiframeタグコードをコピー
- iframeタグの周りをdivタグで囲う
プログラミング学習でこのような経験はありませんか？ これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。 少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
ただし、無料サービスの提供には参加者の数に制限があります。
