ブログ記事への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オン
modestbrandingYouTubeロゴの表示
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
えふめんをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

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