ブログやホームページのコンテンツとして、YouTubeの動画を載せたい場合があると思います。
そんなときのYouTube動画の埋め込み方法と、URLパラメータを指定することで動画プレイヤーの設定や動きを変化させることができるので、まとめてみました。
YouTubeの埋め込み
YouTubeを埋め込む場合、「動画単体」、「再生リスト」、「ユーザーアップロード動画」、「特定のクエリの検索結果」といろいろ方法があるようです。
「動画単体」
まずは、最も基本的な「動画単体」の埋め込み方法から。
ブログ記事へのYouTube動画の埋め込みは簡単です。
まずは、動画を検索し、埋め込みたい動画を表示させます。
そして、動画の下にある「共有」ボタン⇒「埋め込みコード」を押します。
そこに表示される「<iframe>」タグを埋め込みたいブログ記事に貼り付けます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/0mvjCFrbILc" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
すると、このような感じで動画が埋め込まれました。
ちなみに、個人的に好きな「斉藤和義」さんの動画です。
いい曲だ。。
YouTube動画を埋め込む場合は、この「<iframe>」タグでの埋め込み方法が推奨されています。
推奨方式: IFrame の場合はクライアントの機能と使用できる YouTube ファイル形式に基づいて適切なプレーヤーが選択されるため、YouTube プレーヤーの埋め込みには埋め込み IFrame がおすすめです。
出典：YouTube 埋め込みプレーヤーとプレーヤーのパラメータ – YouTube — Google Developers
「再生リスト」、「ユーザーアップロード動画」、「特定のクエリの検索結果」
続いて、「動画単体」以外の埋め込み方法です。
「動画単体」以外にも、「再生リスト」、「ユーザーアップロード動画」、「特定のクエリの検索結果」の埋め込みが可能です。
それぞれの埋め込むURLは、「https://www.youtube.com/embed」以降に以下のように付け加えます。
- 「再生リスト」…「?listType=playlist&list=[再生リストID]」
- 「ユーザーアップロード動画」…「?listType=user_uploads&list=[ユーザーID]」
- 「特定のクエリの検索結果」…「?listType=search&list=[検索文字列]」
再生リスト、ユーザーアップロード動画のIDに関しては、それぞれページへアクセスしてURLを見れば分かります。
下記がIDとなります。
- 「再生リスト」…「https://www.youtube.com/watch?v=ZJzbIxP0pWU&list=PL1F408CDA76C6192F」
- 「ユーザーアップロード動画」…「https://www.youtube.com/user/kazuyoshisaitoch/featured」
URLパラメータ
主なURLパラメータ一覧
主なURLパラメータ一覧を調べてみたら、結構ありました。
以下、表にまとめています。
| パラメータ／設定値 ※デフォルト値 |
概要／設定値の説明 |
| autohide | 進行バー、動画コントロールの自動非表示 |
| 0 | 進行バー自動非表示オフ、動画コントロール自動非表示オフ |
| 1 | 進行バー自動非表示オン、動画コントロール自動非表示オン |
| 2（※） | 進行バー自動非表示オン、動画コントロール自動非表示オフ |
| autoplay | 動画の自動再生 |
| 0（※） | 自動再生オフ |
| 1 | 自動再生オン |
| color | 進行バーのカラー |
| red（※） | 赤色 |
| white | 白色 |
| disablekb | キーボードで操作可否 |
| 0（※） | キーボード操作可 |
| 1 | キーボード操作不可 |
| ※キーボード操作について ・スペースキー：再生／一時停止 ・左矢印キー ：現在の動画を10％戻す ・右矢印キー ：現在の動画を10％進める ・上矢印キー ：音量を上げる ・下矢印キー ：音量を下げる |
|
| end | 動画再生の停止位置（時間） |
| 正の整数 | 秒数 |
| fs | 全画面表示ボタンの表示 |
| 0 | 非表示 |
| 1（※） | 表示 |
| hl | 言語設定 |
| ja、enなど | 言語コード |
| iv_load_policy | 動画アノテーション（オーバーレイ表示のクリック可能なテキスト）の表示 |
| 1 | デフォルト表示 |
| 3（※） | デフォルト非表示 |
| loop | 繰り返し再生 |
| 0（※） | オフ |
| 1 | オン |
| modestbranding | YouTubeロゴの表示 |
| 0（※） | 表示 |
| 1 | 非表示 |
| playlist | 連続再生させる動画のリスト |
| XXXXX,XXXXX | 動画ID（カンマ区切り） |
| rel | 動画終了後の関連動画の表示 |
| 0 | 非表示 |
| 1（※） | 表示 |
| showinfo | 再生前のタイトルやユーザー情報の表示 |
| 0 | 非表示 |
| 1（※） | 表示 |
| start | 動画再生の開始位置（時間） |
| 正の整数 | 秒数 |
| theme | 動画コントロールなどのテーマ色 |
| dark（※） | 暗色のテーマ |
| light | 明色のテーマ |
URLパラメータの使い方
URLパラメータは、埋め込み動画のURL末尾に「?」を付けて、「パラメータ=設定値」の形式で使用します。
また、パラメータを複数設定する場合は、「&」で繋げます。
では、実際にやってみましょう。
今回は、サンプルとして以下のように設定します。
- 動画再生の開始位置「start」…「30」
- 動画再生の停止位置「end」…「60」
- 動画終了後の関連動画の表示「rel」…「0」（非表示）
- 進行バーのカラー「color」…「white」（白色）
この設定で、URL末尾に追加するパラメータは「?start=30&end=60&rel=0&color=white」となります。
実際の埋め込み用の「<iframe>」タグは、以下のようになります。
<iframe width="560" height="315" src="https://www.youtube.com/embed/0mvjCFrbILc?start=30&end=60&rel=0&color=white" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
そして、埋め込み動画がこちら。
設定通り、動画再生は30～60秒の間になり、動画終了後の関連動画は表示されず、進行バーは白色になっていますね。
YouTube動画の埋め込み方法とURLパラメータについては、以上です。
いろいろと試してみて、ユーザーが動画を見やすいように設定してみてはいかがでしょうか。
コメント