YouTubeの埋め込みを使いこなしたい人。埋め込み方が分からない人へ。
本記事では、下記内容を解説します。
- YouTubeの埋め込み使いこなし術！13個のテクニックまとめ
- 再生リスト埋め込み方法
YouTubeの動画は共有ができます。
共有は各SNSに動画のリンクを送れます。
- Google+
- goo
- 楽天ブログ
- Blogger
- mixi
- Ameba
- Tumblr
これに加えてメールでの共有と
埋め込みでの共有方法があります。
それでは埋め込み方法について解説していきます。
YouTubeの埋め込み使いこなし術！13個のテクニックまとめ
動画の下に『共有』ボタンがあるので押します。
ポップアップでリンクの共有の表示になります。
SNSで共有したい場合は各SNSのボタンを押します。
そうするとSNSのWebサイトへ飛んで共有画面が表示されます。
こちらはツイッターの場合。
YouTube埋め込みコードの取得のやり方
共有を押して、『埋め込む』を選択します。
すると、動画の埋め込みが表示され
動画を表示する為のコードが表示されます。
このコードをコピーすれば埋め込みコードの取得は完了です。
ブログへの埋め込み
埋め込みコードを取得したら、
WordPressなどのブログにコピーしたコードをそのまま埋め込んでみます。
実際に埋め込みました↓
動画プレイヤーのサイズを指定する
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/peiYKYFeZ18″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
width=”560″ height=”315″
widthは横幅（デフォルト値は 640 です。）
heightは縦幅（デフォルト値は 360 です。）
ここのサイズを変更すれば表示が変わります。
動画のタイトルを非表示に
タイトルを非表示にするには
showinfo=0
こちらをつけます。
showinfo=0 （非表示）
showinfo=1 （表示）
動画URLの後ろに「?showinfo=0」をつける
https://www.youtube.com/embed/Aj7d3z-MZtY?showinfo=0
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/peiYKYFeZ18?showinfo=0” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
タイトルはYouTubeへのリンクになっているのでYouTubeに行ってほしくない（自分のサイトから離脱を防ぐ）ときに使うといいです。
これでタイトルが消えるはずだったんですが、
こちらは2018年9月25日以降推奨されておらず使えなくなったようです・・
なぜ使えなくなったかというと
タイトルはYouTubeユーザーにとっては重要な部分なので
非表示はしないほうがいいという結論でしょう。
動画が終わったら関連動画を非表示にする
動画を全部見た後、関連動画が表示されます。
これを非表示にするには
rel=0 を追加します。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/xhptnAHD6Hw?rel=0” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
この関連動画非表示にする方法も2018年9月25日以降だと
関連動画は非表示にできなくて、
自分の関連動画が表示されるようになりました。
この動画の最後に行くと自分の関連動画が表示されます。
埋め込み動画を自動的に再生する
ページを開いた途端動画を再生する設定ができます。
でもこれはユーザーにとってはうっとおしいし、
びっくりしてしまうのであんまりおすすめしません。
使い方次第ですね。
autoplay=1
を追加します。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/peiYKYFeZ18?autoplay=1” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
再生開始位置と再生終了位置を指定する
動画の部分をピンポイントで見てほしい場合がありますよね。
そんな時、動画の開始時間、終了時間を指定できます。
開始時間指定
?start=6
開始する秒数を追加します。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/xhptnAHD6Hw?start=6” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
動画を途中で停止させる
?end=30
終了する秒数を追加します。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/xhptnAHD6Hw?end=30” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
開始時間と終了時間を組み合わせる
こちらを使うと終了時間になったら自動で停止されます。
?start=60&end=70
つなげる場合は＆でつなぐことができます。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/xhptnAHD6Hw?start=60&end=70” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
動画をループ再生させる
こちらは動画を何度も再生させる設定になります。
?loop=1&playlist=VIDEO_ID
VIDEO_IDはembed/の文字列になります。
つなげる場合は＆でつなぐことができます。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/peiYKYFeZ18?loop=1&playlist=peiYKYFeZ18” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
コントロールを非表示にする
?controls=0
controls=0 （表示されません）
controls=1 （デフォルト：表示される）
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/peiYKYFeZ18?controls=0” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
このコントロールがなくなります。
埋め込み動画に字幕を追加する
字幕を表示させます。
動画に字幕設定がされてれば表示できます。
?cc_load_policy=1&cc_lang_pref=ja
cc_load_policy=0 （表示されません）
cc_load_policy=1 （表示される）
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/xhptnAHD6Hw?cc_load_policy=1&cc_lang_pref=ja” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
動画の埋め込みを無効にする
ユーザーに動画の埋め込みをできなくする設定があります。
埋め込みを許可のチェックを外すだけです。
新クリエイターツール
旧クリエイターツール
再生リスト埋め込み方法
再生リストも埋め込むことができます。
再生リストの一覧にいきます。
『共有ボタン』を押して「埋め込みコード」を押します。
- 動画のサイズ
- プレーヤーのコントロール バーを表示する
- 動画のタイトルとプレーヤーの操作を表示する
このへんの設定をしてコードをコピーしてブログなどへ埋め込みます。
今回参考にしたサイト
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ | YouTube IFrame Player API | Google Developers https://developers.google.com/youtube/player_parameters?hl=en#cc_load_policy
英語なので翻訳してみてください。
日本語のページもあるのですが、最新の情報が載ってませんでしたので
こちらを確認しました。
YouTubeの埋め込み使いこなし術まと
今回色々ご紹介しましたが、
正直あまり使うことはない気がします＾＾；
ただ知っておくことは大事だと思うので
こんなのあったな〜くらいに覚えておけばいいです。
使う機会があれば検索して調べればいいだけです！
ちょっとでもコードが間違ってると意図した結果にならないので注意が必要です。
以上、YouTubeの埋め込み使いこなし術！13個のテクニックまとめでした！
最後までお読みいただきありがとうございました。
