YouTube

YouTubeの埋め込み使いこなし術!13個のテクニックまとめ

疑問
YouTubeの埋め込みを使いこなしたい人。埋め込み方が分からない人へ。

本記事では、下記内容を解説します。

 

本記事の内容
  1. YouTubeの埋め込み使いこなし術!13個のテクニックまとめ
  2. 再生リスト埋め込み方法

YouTubeの動画は共有ができます。
共有は各SNSに動画のリンクを送れます。

SNS
  1. Twitter
  2. Facebook
  3. Google+
  4. goo
  5. 楽天ブログ
  6. Blogger
  7. mixi
  8. Ameba
  9. Tumblr
  10. reddit

これに加えてメールでの共有と
埋め込みでの共有方法があります。

それでは埋め込み方法について解説していきます。

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

終了する秒数を追加します。

開始時間と終了時間を組み合わせる

こちらを使うと終了時間になったら自動で停止されます。

?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個のテクニックまとめでした!
最後までお読みいただきありがとうございました。