埋め込みプレーヤーの設定次第で、動画、再生リスト、ユーザーのアップロード動画、または特定のクエリに対する検索結果が読み込まれるようにすることができます。
以下のリストで、これらのオプションについて説明します。
◆動画の読み込み
埋め込み IFrame の場合は、読み込む動画の YouTube 動画 ID を IFrame の src URL に指定します。
http://www.youtube.com/embed/VIDEO_ID
YouTube Data API（v3）を使用している場合、動画 ID を検索結果、再生リスト アイテム リソース、動画リソースなどのリソースから取得して、これらの URL をプログラムによって構成することができます。動画 ID を取得した後、上の URL の中にある VIDEO_ID というテキストをその値に置き換えてプレーヤー URL を作成します。
◆再生リストの読み込み
listType プレーヤー パラメータを playlist に設定します。
また、list プレーヤー パラメータを、読み込む YouTube 再生リスト ID に設定します。
http://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID
再生リスト ID の前には、次の例に示すように、文字 PL を付ける必要があります。
http://www.youtube.com/embed?listType=playlist&list=PLC77007E23FF423C6
YouTube Data API（v3）を使用している場合、再生リスト ID を検索結果、チャンネル リソース、またはアクティビティ リソースから取得して、これらの URL をプログラムによって構成することができます。再生リスト ID を取得した後、上の URL の中にある PLAYLIST_ID というテキストをその値に置き換えます。
◆ユーザーのアップロード動画の読み込み
listType プレーヤー パラメータを user_uploads に設定します。
また、list プレーヤー パラメータを、読み込むアップロード動画の所有者の YouTube ユーザー名に設定します。
http://www.youtube.com/embed?listType=user_uploads&list=USERNAME
◆特定のクエリの検索結果の読み込み
listType プレーヤー パラメータを search に設定します。
次に、list プレーヤー パラメータに検索キーワードを指定すると、その検索結果がプレーヤーに読み込まれます。
http://www.youtube.com/embed?listType=search&list=QUERY
https://developers.google.com/youtube/player_parameters?hl=ja
動画リストを表示
組み合わせて使用: listType list 再生リスト
指定した文言のリスト: search 検索クエリ
YouTube チャンネル: user_uploads チャンネル ID
Qiita
https://qiita.com/stakei1/items/ccae2e0029b2cbd7e33b
YouTube動画の埋め込みコード…自動再生など細かく設定できた！
2017/6/6 2017/6/7
ＩＴ・サイエンス
YouTube動画をブログに埋め込んで、ここぞというポイントから自動スタートさせたいと思っても、YouTubeには分かるような説明が見当たらずに、何となくあきらめていませんか？
挙句のはてには、「動画の○○分●●秒あたりから問題のシーンになります」なんて記載してみたりしていませんか？
もっとスマートにYouTube動画をあなたのブログに埋め込みましょう。
尚、この記事では、コードの仕組みを理解して、簡単にアレンジできるようになることが目的です。
お好きなところからご覧ください
Report Hot Cafe
https://report.hot-cafe.net/youtube-code-1254
◆動画ページ上で提供されているコードのアレンジ
YouTube上で、以下の設定が可能
動画のサイズを指定
「560×315」「640×360」「853×480」「1280×720」「カスタムサイズ」の中から動画のサイズを選択できます。
また、動画のアスペクト比は16対9になっています。
動画が終わったら関連動画を表示
ブログに入れるのでしたら、表示しないほうがYouTubeへ行かれないかもしれません。
プレーヤーのコントロールを表示
表示しないと、ブログなどで見てもらった場合、どうしてよいのか分からない人もいると思います。
動画のタイトルとプレーヤーの操作を表示
動画の上部に表示されるタイトル等です。
プライバシー強化モードを有効
プライバシー強化モードを有効にすると、ウェブサイトの訪問者が動画を再生しない限り、訪問者に関する情報は YouTube に保存されないとのことです。
ほとんどの人がこの設定を有効にしていないと思いますので、ここはあまり気にしないでも良いと思います。
これらのチェックをするとコードに反映しますので、コピーペーストします。
◆コードの仕組みを確認しておく
取得した埋め込みコード
＜iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/sIgawh0g-PI” frameborder=”0″ allowfullscreen＞＜/iframe＞
動画が終わったら関連動画を表示する
プレーヤーのコントロールを表示する
動画のタイトルとプレーヤーの操作を表示する
src=”https://www.youtube.com/embed/sIgawh0g-PI”
この３つにチェックを入れたのが、コードに何も付加されていない状態
動画が終わったら関連動画を表示する
チェックを外すと
src=”https://www.youtube.com/embed/sIgawh0g-PI?rel=0”
プレーヤーのコントロールを表示する
チェックを外すと
src=”https://www.youtube.com/embed/sIgawh0g-PI?controls=0”
動画のタイトルとプレーヤーの操作を表示する
チェックを外すと
src=”https://www.youtube.com/embed/sIgawh0g-PI?showinfo=0“
３つともはずすと
＜iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/sIgawh0g-PI?rel=0&controls=0&showinfo=0″ frameborder=”0″ allowfullscreen＞＜/iframe＞
このコードをベースにやりたいことを追加する
これらの利用頻度が高いと思います。
自動再生
autoplay=1
値: 0 または 1
動画が自動的に再生されますので、使う動画によっては注意してください。
〇〇秒よりスタート
start=秒数
値: 正の整数
動画の先頭から指定された秒数分進めた位置から再生されます。
xx秒で終わる
end=秒数
値: 正の整数
動画の先頭から測定し、再生を停止します。
ループ再生
loop=1
値: 0 または 1
1 を設定すると
最初の動画が繰り返し、再生されます。
尚、このパラメータを単一動画に使うには
loop=1&playlist=VIDEO_ID
このように「 playlist 」パラメータとセットでの利用になります。
startパラメータが設定してあっても、ループ再生時には頭からのスタートになります。
これらは、複合して利用できます。
尚、上記のパラメータはすべて省略可能です。
◆これら以外の使えるパラメータ
ちなみに、こんなパラメータがあるよというレベルの説明ですが、気になるものがあれば調べてご利用ください。
cc_load_policy：字幕表示
color：プレーヤーの動画進行バーに動画を開始してからの経過時間を示すときに使用する色を指定
disablekb：キーボード操作の有効無効
enablejsapi：JavaScript API が有効無効
fs：全画面表示ボタンを表示の有無
hl：プレーヤーのインターフェースの言語を設定
iv_load_policy：動画アノテーション表示
list：プレーヤーに読み込むコンテンツを識別するときに、listType パラメータと組み合わせて使用
listType：レーヤーに読み込むコンテンツを識別するときに list パラメータと組み合わせて使用
modestbranding：YouTube ロゴを表示の有無
origin： IFrame API のセキュリティを強化
playlist： 再生する動画 ID をカンマで区切ったリスト
playsinline：このパラメータは iOS 上の HTML5 プレーヤー制御
◆実際のコードの書き方を確認
前述のYouTubeから取得したコードの動画を示す部分
src=”https://www.youtube.com/embed/sIgawh0g-PI”
sIgawh0g-PIの部分はVIDEO_IDなので以下のように簡略化して説明します。
src=”https://www.youtube.com/embed/VIDEO_ID”
この部分にパラメータと値を加えていきます。
「?」を加えてからになります。
src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ＝値”
複数のパラメータを加えたい場合は「&」で繋げます。
src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ=値&パラメータ=値&パラメータ=値&パラメータ=値”
YouTubeからコードを取得すると「&」部分が「&」となっているかと思います。
HTMLのソース表記で「&」と記載してブラウザで見ると「&」と表示されるはずです。
ブログのエディターなどで、うまく動画が表示されない場合のみ注意してみてください。
「&」と記載して問題が無いですが、念のため覚えておいてください。
実際に記載する場合は以下のようになります。
＜iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ=値&パラメータ=値&パラメータ=値&パラメータ=値” frameborder=”0″ allowfullscreen＞＜/iframe＞
◆まとめ
基本的な埋め込み方法は次のとおり
埋め込みたい動画を選ぶ
検索するなどブログ等に埋め込みたい動画を選んでください。
埋め込みコードの取得
動画ページ上で提供されているコードのアレンジ
YouTube上で、以下の設定が可能
動画のサイズを指定
動画が終わったら関連動画を表示
プレーヤーのコントロールを表示
動画のタイトルとプレーヤーの操作を表示
プライバシー強化モードを有効
これらのチェックをするとコードに反映します。
そのコードをメモ帳などのエディターにコピーペーストしておきます。
例：＜iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/sIgawh0g-PI?rel=0&loop=1&playlist=sIgawh0g-PI” frameborder=”0″ allowfullscreen＞＜/iframe＞
そして、このコードをベースにやりたいことを追加する
自動再生
autoplay=1
xx秒よりスタート
start=秒数
xx秒で終わる
end=秒数
ループ再生
loop=1
このパラメータを単一動画に使うには
loop=1&playlist=VIDEO_ID
このように「 playlist 」パラメータとセットでの利用になります。
埋め込みコードの動画を示す部分の例
src=”https://www.youtube.com/embed/VIDEO_ID”
この部分にパラメータと値を加えていきます。
src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ＝値”
複数のパラメータを加えたい場合は「&」で繋げます。
src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ=値&パラメータ=値&パラメータ=値&パラメータ=値”
実際に記載する場合は以下のようになります。
＜iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ=値&パラメータ=値&パラメータ=値&パラメータ=値” frameborder=”0″ allowfullscreen＞＜/iframe＞
Report Hot Cafe
https://report.hot-cafe.net/youtube-code-1254
| デフォルト値 | 概要／設定値の説明 |
| loop=0 | 繰り返し再生オフ |
| loop=1 | 繰り返し再生オン |
| playlist=VIDEOLIST_ID | 動画連続再生,リストID |
| playlist=XXXXX,XXXXX | 動画連続再生,カンマ区切り |
| hl=ja,enなど | 言語設定 |
| rel=0 | 動画終了後の関連動画の表示オフ |
| rel=1 | 動画終了後の関連動画の表示オン |
| autohide=0 | 進行バー自動非表示オフ |
| autohide=1 | 進行バー自動非表示オン |
| autoplay=0 | 自動再生オフ |
| autoplay=1 | 自動再生オン |
| end=秒数 | 動画再生の停止位置(時間）,正の整数 |
| iv_load_policy=0 | 動画アノテーション(オーバーレイ広告）オフ |
| iv_load_policy=1 | 動画アノテーションオン |
