ウェブサイトにYouTubeの動画を埋め込みたいんだけど、どうやったらいいんだろう？
YouTubeの動画をウェブサイトに埋め込む方法は簡単だよ！
以下に手順を解説するね。
YouTube動画の埋め込みコードの取得
まず、YouTubeで埋め込みたい動画を開き、動画の下にある「共有」ボタンをクリックします。
すると、埋め込み用のコードが表示されますので、コードの右側にあるオプションで、埋め込みたい動画のサイズや再生オプションを設定できます。
ウェブサイトのHTMLに埋め込みコードを追加する
埋め込みコードをコピーし、YouTube動画を表示したい場所にコードを挿入します。
通常は、<iframe>要素を使用して埋め込みます。
<div class="c-media">
<iframe width="560" height="315" src="https://www.youtube.com/embed/_5e6deXdCj8?si=WeqEwiSFIk1duewW"
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>
</div>src以外にも各属性があるので、参考までにご覧ください。
| 属性 | 説明 | 使用例 |
|---|---|---|
| title | プレーヤーのタイトルを指定します。通常、この属性には”YouTube video player”などのデフォルトの値が使用されます。 | title=”YouTube video player” |
| frameborder | プレーヤーの境界線の有無を指定します。 0を指定すると境界線が表示されなくなります。 | frameborder=”0″ |
| allow | プレーヤーが許可される機能を指定します。 これにより、加速度センサー、自動再生、クリップボードへの書き込みなどが許可されます。 | allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” |
| referrerpolicy | リファラポリシーを指定します。 この属性は、外部サイトからのリクエストのリファラ情報の制御に使用されます。 | referrerpolicy=”strict-origin-when-cross-origin” |
| allowfullscreen | フルスクリーン表示が許可されるかどうかを指定します。 0を指定するとフルスクリーン表示が無効になります。 | allowfullscreen |
以上となります。
ここまでの設定でyoutubeの埋め込みは完成です！
ぜひ実際のブラウザで確認してみてください！
まとめ
YouTubeの動画をウェブサイトに埋め込む方法は簡単です。
共有ボタンから埋め込みコードを取得し、HTMLに貼り付けるだけで動画を表示できます。
是非、ウェブサイトに動画を追加してコンテンツを充実させてみてください！