ブログ記事へのYouTube動画の埋め込み方法と、URLパラメータまとめ

Web Web
この記事は約5分で読めます。

※当ブログではアフィリエイト広告を利用しています。

ブログやホームページのコンテンツとして、YouTubeの動画を載せたい場合があると思います。

そんなときのYouTube動画の埋め込み方法と、URLパラメータを指定することで動画プレイヤーの設定や動きを変化させることができるので、まとめてみました。

YouTubeの埋め込み

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パラメータ一覧を調べてみたら、結構ありました。

以下、表にまとめています。

主なURLパラメータ一覧(※2015年5月22日現在)
パラメータ/設定値
※デフォルト値
概要/設定値の説明
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パラメータについては、以上です。

いろいろと試してみて、ユーザーが動画を見やすいように設定してみてはいかがでしょうか。

参考サイト

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ – YouTube — Google Developers

Web
\よかったらシェアしてね!/
えふめん

大阪在住、30代。
業務系SE・社内SE。

PCトラブルの調査、自作デスクトップPCのこと、PC周辺機器のレビューなどの記事を書いています。

えふめんをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました