YouTube動画は単純に埋め込むだけではなく、ホームページにアクセスした際に自動再生されるようにしたり、再生終了後の関連動画を再生しないようにしたりする方法があります。
基本設定
まず埋め込みたい動画のページへ。
再生画面下に共有ボタンがあります。そちらを押します。
埋め込みコードをクリックし、
出てきたテキストエリアにコードが表示されます。
例：
<iframe width=”700″ height=”480″ src=”https://www.youtube.com/embed/-4X1X9Qoq84″ frameborder=”0″ allowfullscreen></iframe>
このコードを埋め込みたい場所にコピーして貼り付けることで動画を埋め込むことができます。
コードの概要
下記コードから簡単に説明をします。
各種表示用の設定
画面サイズの設定
width=”○”・・・横幅を設定できます
height=”□”・・・縦幅を設定できます
○と□の数値を任意で設定出来ます。
縦横比を誤って入力すると動画が歪みますので、ご確認ください。
動画の参照先
src=”https://www.youtube.com/embed/動画ID”
srcから始まる、この部分が動画の参照先URLになります。
枠線の設定
frameborder=”0″・・・周囲に枠線をつけない
frameborder=”1″・・・周囲に枠線をつける
「1」に変更するとプレイヤーの外に1pxの線が表示されます。
全画面表示
allowfullscreen・・・全画面表示が不可能
allowfullscreen・・・全画面表示が可能
カスタムオプション
埋め込みでカスタムしたい場合に使う、オプションをご紹介します。
埋め込みたい動画のページを表示し、
埋め込みコードの下にあるもっと見るを押してください。
カスタム項目が5つ表示されます。
選択変更したり、チェックボックスのチェックを外す、つけるとコードが変化します。
動画のサイズ
1番上は動画のサイズが変更できます。
セレクトボックスになります。
【横700px × 縦480px】から【横480px × 縦360px】に変更した場合、下のようにコードが変わります。
<iframe width=”700″ height=”480″ src=”https://www.youtube.com/embed/-4X1X9Qoq84″ frameborder=”0″ allowfullscreen></iframe>
<iframe width=”480″ height=”360″ src=”https://www.youtube.com/embed/-4X1X9Qoq84″ frameborder=”0″ allowfullscreen></iframe>
再生終了後、関連動画の表示・非表示
チェックを外すと再生終了後、関連動画が表示されなくなります。
関連動画が表示されると、自分のサイトに来たユーザーがYouTubeに流れてしまうことがあります。
それを防ぎたい場合、このパラメーターを活用します。
<iframe width=”700″ height=”480″ src=”https://www.youtube.com/embed/-4X1X9Qoq84?rel=0″ frameborder=”0″ allowfullscreen></iframe>
動画URLの後に『?rel=0』がつきます。
自動的に動画を再生する
『?autoplay=1』を追加します。
『?autoplay=0』で自動再生をしないという指定ですが、これは初期値なのでなくて問題ありません。
<iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/-4X1X9Qoq84?autoplay=1″ controls=0&showinfo=0″ frameborder=”0″ allowfullscreen></iframe>
指定位置から動画を開始する
動画の埋め込みコードに『?start=○』を追加します。
○には秒数を入力してください。
例えば、動画を15秒の位置から再生するには、埋め込みコードは次のようになります。
<iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/-4X1X9Qoq84?start=15″ controls=0&showinfo=0″ frameborder=”0″ allowfullscreen></iframe>
指定位置から動画を再生し、指定位置で止める
動画の埋め込みコードに「?start=●&end=▲」を追加します。
●には開始時間を秒数で入力、▲には終了時間を秒数で入力してください。
動画を35秒から開始し、
40秒の位置で終了するコードは次のようになります。
<iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/-4X1X9Qoq84?start=35&end=40″ controls=0&showinfo=0″ frameborder=”0″ allowfullscreen></iframe>
再生後、タイトルとプレーヤー操作、コントロールバーを非表示にする
再生後、3秒程度で上下のバーがフェードアウトします。
カーソルを上に乗せると、再び表示されます。
『?autohide=1』を追加します。
コードは下記のようになります。
<iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/-4X1X9Qoq84?autohide=1″ controls=0&showinfo=0″ frameborder=”0″ allowfullscreen></iframe>
アノテーションを非表示にしたい
YouTubeでは動画にコメントを挿入出来るアノテーション機能があります。
動画の管理者が追加できる機能で、
動画内に吹き出しが表示され、説明やコメントを見たことがありますでしょうか？
サイトに埋め込む際に邪魔になることがあります。
それを無効にして表示させないオプションになります。
『iv_load_policy=1』がアノテーション有りで、『iv_load_policy=3』がアノテーション無しです。
追加後のコードは下記になります。
<iframe src=”https://www.youtube.com/embed/-4X1X9Qoq84?iv_load_policy=3″ width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
字幕の表示、言語選択
ユーザーが字幕機能をオフにしていても、字幕を表示させることができます。
動画の埋め込みコードに『&cc_load_policy=1』を追加します。（「&cc_load_policy=0」で字幕オフ）
字幕の言語を選択することも可能です。
埋め込み動画の字幕の言語を指定するには、その動画の埋め込みコードに『?cc_lang_pref=fr&cc_load_policy=1』を追加します。
『cc_lang_pref=fr』は動画の字幕の言語を設定します。
『fr』はフランス語を指定しています。
2文字の言語名コードは ISO 639-1 標準で確認できます。
コードは以下になります。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/-4X1X9Qoq84?cc_lang_pref=fr&cc_load_policy=1″ frameborder=”0″ allowfullscreen></iframe>
コントロールバーとプログレスバーの色を変更
サイトカラーに合わせて色を変えたい場合などに使用します。
1. ?theme=dark&color=red
2. ?theme=dark&color=white
3. ?theme=light&color=red
4. ?theme=light&color=white
上記、4種類の組み合わせがあります。
デフォルトでは1です。
下記コードは2の表示になります。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/-4X1X9Qoq84?theme=light&color=white” frameborder=”0″ allowfullscreen></iframe>
オプションを複数指定する
複数のオプションをつける場合は、それぞれを『&』で繋ぎます。
例としては「自動再生して、コントロールバーを表示させない」という設定は以下コードになります。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/-4X1X9Qoq84?controls=0&autoplay=1″ frameborder=”0″ allowfullscreen></iframe>
画面のサイズに合わせる（レスポンシブ対応）
スマホで見ている方も、PCで見ている方もこれまでに記載していた動画の大きさがバラバラだと思ったのではないでしょうか。
YouTubeの動画は幅ナドが指定されているため、閲覧するデバイスによって見やすさが変わります。
そんな時はデバイスによって見え方を自動で替えてくれる“レスポンシブ対応”で埋め込むのがおすすめです。
コードは以下の通りです。
<div class=”responsive” style=”width: 100%; aspect-ratio: 16/9;”>
<iframe width=”100%” height=”100%” src=”https://www.youtube.com/embed/〇〇〇” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></div>
〇には動画のIDを入れればOKです！
いかがでしたか。
埋め込む際にはぜひご活用ください！