Home
CSS
【総まとめ】WebサイトにYouTube動画を埋め込む方法

【総まとめ】WebサイトにYouTube動画を埋め込む方法

公開日
2021.05.22
更新日
2022.04.02
【総まとめ】WebサイトにYouTube動画を埋め込む方法

どうも!かけちまるです!

今では、ほとんどのサイトにYouTubeの埋め込みが使われていますね。
なので、駆け出しエンジニアやブログを始めた方々はYouTubeの埋め込み方法を知っておくことは必須となります。
YouTubeの埋め込み方法を知っている方は、動画の開始位置などを指定できるオプション設定や自動再生などを設定できるパラメータについて理解できると実装の幅が広がるのではと思います。

ということでこの記事を読むと、

  • ・webサイトにYouTubeを埋め込む方法
  • ・オプション設定の説明
  • ・パラメータのご紹介
  • ・縦横比を保ちながらYouTubeの埋め込みをレスポンシブ対応にする方法

が理解できます。

YouTubeの埋め込み方法

YouTube.comにアクセスし、埋め込みたい動画を表示する。

②共有をクリックする。

共有をクリック

③モーダルウィンドウが開くのでそこで埋め込むを選択する。

埋め込むを選択

④開始位置や埋め込みオプションを選択する

埋め込みオプションを選択
オプションの説明
  • 開始位置
    動画をどの辺からスタートするかを指定する。
  • プレーヤーのコントロールバーを表示する。
    チェックすると一時停止ボタンなどのコントロールバーを非表示にできる。
  • プライバシー強化モードを有効にする。
    デフォルトのYouTube動画の埋め込みは、サイト訪問者がYouTube動画が埋め込まれているWebサイトに訪れるとその訪問者に最適な広告を表示するための情報を保存するのです。
    でも、プライバシー強化モードを有効にするとサイトに訪れてもYouTubeの埋め込みを再生しない限り情報は保存されなくなります。
  

⑤埋め込みタグをコピーする。

⑥表示したい場所に埋め込みタグを貼り付ける。

パラメータについて

ここでは、自動再生したりループ再生したりさせたいときに設定するパラメータについてよく使うケースを想定していくつか紹介していきますね。

じゃあまず書き方から。

基本の書き方

HTML
コピー
<!-- 【パラメータ】のところに書いていく --> <iframe width="560" height="315" src="https://www.youtube.com/embed/JHLY-NzJnjU【パラメータ】" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <!-- こんな感じで書いていく --> <iframe width="560" height="315" src="https://www.youtube.com/embed/JHLY-NzJnjU?autoplay=1&mute=1 " title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

上コードのように【パラメータ】と書いてあるところに設定します。
具体的には、「?autoplay=1」とか「&mute=1」とかです。
?」以降にパラメータを書いて、複数指定したいときは「&」でつなげて書いていきます。

パラメータの種類

パラメータ 説明
autoplay=1 サイトを読み込んだときに自動再生します。
デフォルト値は0
mute=1 デフォルトで動画の音声をオフにします。
デフォルト値は0
loop=1 動画を繰り返し再生します。
playlistパラメータと組み合わせないと動作しません。
デフォルト値は0
playlist=【動画ID】 動画IDを指定することで動画をリスト再生されます。
複数指定する場合は、カンマ区切りで指定します。
Loopパラメータと組み合わせないと動作しません。
playsinline=1 iOSで動画を再生するときに全画面表示にさせない。
デフォルト値は0。
rel=0 2018年9月25日から関連動画を完全に非表示にすることができなくなりました。
代わりに設定すると再生した動画のチャンネルから関連動画が表示されるようになります。
デフォルト値は1
fs=0 コントロールバーに全画面表示バタンを非表示にします。
デフォルト値は1
hl=ja ユーザーインターフェイスの言語を設定できます。
値の具体例は、ja(日本語)・en(英語)・zh(中国語)などです。
※1
start=10 動画の先頭から指定した秒数分だけ進めた位置から動画を再生します。
rel=0 2018年9月25日から関連動画を完全に非表示にすることができなくなりました。
代わりに設定すると再生した動画のチャンネルから関連動画が表示されるようになります。
デフォルト値は1
fs=0 コントロールバーに全画面表示バタンを非表示にします。
デフォルト値は1
hl=ja ユーザーインターフェイスの言語を設定できます。
値の具体例は、ja(日本語)・en(英語)・zh(中国語)などです。
※1
start=10 動画の先頭から指定した秒数分だけ進めた位置から動画を再生します。
end=60 動画の先頭から指定した秒数で動画を停止します。
controls=0 コントロールバーを非表示にする。
デフォルト値は1
modestbranding=1 右下に表示されるYouTubeのロゴを非表示にする。
デフォルト値は0
disablekb=1 動画をキーボードで操作できなくする。
デフォルト値は0
color=white 再生バーの色を変更できます。
設定できる値は、redかwhiteのみのようです。
iv_load_policy=3 動画アノテーションを非表示にできます。
動画アノテーションとは、動画上に表示されるリンクテキストやリンクエリアのこと。
デフォルト値は1
cc_lang_pref=en 字幕の言語を指定できます。
値の具体例は、ja(日本語)・en(英語)・zh(中国語)などです。
※1
cc_load_policy=1 字幕をデフォルトで表示します。
デフォルト値は0

※1 こちらのURLでISO 639-1 Codeの列の値を設定してください。
https://www.loc.gov/standards/iso639-2/php/code_list.php

よく使われるパラメータ指定

個人的には、パラメータを指定せずデフォルトで使うことが多いですがパラメータをつけるならこの辺が多いのではというところをいくつかご紹介したいと思います。

個人的によく使うコード

HTML
コピー
<iframe width="560" height="315" src="https://www.youtube.com/embed/JHLY-NzJnjU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

自動再生させたい

HTML
コピー
<iframe width="560" height="315" src="https://www.youtube.com/embed/JHLY-NzJnjU?autoplay=1&mute=1&playsinline=1&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

動画を自動再生させたいときは、autoplay=1mute=1を指定する必要があります。
ここからはお好みで指定してもらえればOKで、
iOSで動画を再生するときに全画面表示にさせないplaysinline=1を指定します。
あとは、rel=0再生した動画のチャンネルから関連動画が表示されるようになります。

自動再生&繰り返し再生させたい

HTML
コピー
<iframe width="560" height="315" src="https://www.youtube.com/embed/JHLY-NzJnjU?autoplay=1&mute=1&loop=1&playlist=JHLY-NzJnjU&playsinline=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

動画を自動再生させたいときは、autoplay=1mute=1を指定する必要があります
繰り返し再生させたいときは、loop=1playlist=【動画ID】を指定する必要があります。
ここからはお好みで指定してもらえればOKで、
iOSで動画を再生するときに全画面表示にさせないplaysinline=1を指定します。

縦横比を保ちながらYouTubeの埋め込みをレスポンシブ対応にする方法

縦横比を保ちながらYouTubeの埋め込みをレスポンシブ対応にする方法をご紹介します。
解説は別記事に書いているのでそちらで確認してください。
ここでは、HTMLとCSSのコードのみ載せておきます。

HTML
コピー
<div class="youtube_wrap"> <iframe width="560" height="315" src="https://www.youtube.com/embed/JHLY-NzJnjU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
CSS
コピー
.youtube_wrap{ padding-top: 56.25%; width: 100%; position: relative; } .youtube_wrap iframe{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【メンテナンス画面】LightStartの設定方法とデザインカスタマイズ

【メンテナンス画面】LightStartの設定方法とデザインカスタマイズ

【WordPress】記事の公開日と最終更新日を表示

【WordPress】記事の公開日と最終更新日を表示

react-scrollでページ内スクロールが効かない時と複数ページの対応

react-scrollでページ内スクロールが効かない時と複数ページの対応

【Three.js】カメラの距離を調節してWebGL座標をwindow座標(px)に合わせる

【Three.js】カメラの距離を調節してWebGL座標をwindow座標(px)に合わせる

【WordPress】カテゴリーの記事数を取得する方法

【WordPress】カテゴリーの記事数を取得する方法

CSS変数(カスタムプロパティ)の使い方

CSS変数(カスタムプロパティ)の使い方