Youtubeの動画を自分のサイト・ブログに埋め込む際のプレーヤー表示のカスタマイズ方法

公開日: : 最終更新日:2016/06/08 MEMO, WEB&SEO , , , , , ,

medium_4481461680photo credit: Rego – d4u.hu via photopin cc

Youtubeの動画を自分のサイトやブログに貼り付ける場合に 表示の仕方を色々とカスタマズすることがきます。ここでは、その方法をメモしておきます。

動画埋め込みタグの基本

iframe版コードとobject版コード

Youtubeの埋め込みには、iframe版コード(現在の埋め込みコード)と、object版コード(以前の埋め込みコード)があります。
現状どちらも選択可能なのですが、object版というのは”Flashにのみ対応”したものであるため iphoneなどでは再生ができません。試しに同じ動画の埋め込みコードをiframe版コード、object版コードでそれぞれ貼り付けてみると…

・iframe版

・object版

PCで確認しても何も違いはないと思いますが iphoneで確認すると下の画像のようになります。

iphone_youtube

なので、わたくしは基本的にiframe版のみを使用しています。
以下このページではiframe版コードを前提に説明をしていきます。

埋め込みタグの基本形式

埋め込み用のタグは基本的に以下の形式になっていいます(見やすく改行してます)。

tag

・1=プレーヤーのサイズ(width=横幅、heght=縦幅)
・2=動画のURL(波線部分が各動画固有のID)
・3=iframeを囲む枠線の幅
・4=フルスクリーン表示

カスタマイズ表示において特に大事なのが2の部分です。
Youtubeの埋め込み動画では、固有IDに続けて 表示方法に関するパラメータを追記してあげることで プレーヤーの見栄えを設定することができます。

パラメータの基本的な記述方法

動画1:デフォルト

 
動画2:バーなどを非表示に

2つの動画は内容は先のものと一緒です。しかし下の方は待ち受け時に再生用のバーやタイトルなどが表示されないようにパラメータを追記しています(下の赤字部分)。

src=”//www.youtube.com/embed/eQ9dNe3kzJM?controls=0&showinfo=0&rel=0″

 
一見ただの適当な呪文のようにも見えますが、パラメータにはちゃんと意味があります。下の図を見てください。

tag_2

“?”が、ここから後ろはパラメータだよ~という意味ですね。
以後、「controls=0(コントロールバーの非表示)」「showinfo=0(タイトルバーの非表示)」「rel=0(関連動画の非表示)」という3つのパラメータが設定されており、間を「&」で繋いでいます。

つまり src=”//www.youtube.com/embed/~の部分は、単に動画のある場所を示すURLというだけではなく、動画の表示方法(パラメータ)を指示する命令文でもあるわけです。

以下で、具体的なパラメータをみていきましょう。

具体的なカスタマイズの方法

コントロールバーを非表示にする

デフォルト状態だと動画の下部に表示されるコントロールバーを非表示にするパラメータとしては「controls=0」「autohide=1」の2つの方法があります。

それぞれ待ち受け時の挙動は一緒(非表示)ですが、再生開始後に次のように表示されます。

・controls=0の場合・・・再生開始後も非表示のまま
・autohide=1の場合・・・再生開始後にマウスオーバーした場合にはコントロールバーが表示される

再生中も表示させない設定

src=”//www.youtube.com/embed/eQ9dNe3kzJM?controls=0

再生中にマウスオーバーすると表示される設定

src=”//www.youtube.com/embed/eQ9dNe3kzJM?autohide=1

よくありがちなエラー

パラメータを追加したが反映されない

いくつか原因は考えられますが、わたくしがやらかしていたのはパラメータの開始を意味する「?」を2個つけてしまっていたこと。

もともとタグの取得時に「動画が終わったら関連動画を表示する」のチェックが外れていると、URLのお尻に”?rel=0″のパラメータが書き加えられています。
なのでこれに気づかずに…

src=”//www.youtube.com/embed/eQ9dNe3kzJM?rel=0?controls=0″

みたいなことを書いてしまうと設定がうまく反映されません。

「?」はあくまでパラメータの開始位置だけ、各パラメータの接続は「&」になります。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

それは詐欺メール! 三菱東京UFJ銀行(bk@mufg.jp)からメールアドレスを確認する旨のメールが届いた

まず結論から言いますと「三菱東京UFJ銀行(bk@mufg.jp)名義のメールが届き"メールアドレス

google_kare_001

googleカレンダーで項目選択や入力ができなくなった場合の対処法

FireFox(ver45.0.2)でgoogleカレンダーにログインし、いざ予定を書き込もうとした

chikan_001

WordPress 記事本文のHTMLタグ・文字列を置換する方法

タイトルどおり WordPressで記事本文内に記述したHTML(CSS)タグを検索・置換する方法で

evernote_suport_001

Evernote(エバーノート)の日本語メールサポートに問い合わせる方法

Evernote(エバーノート)の日本語メールサポートに問い合わせる方法が なかなか分かりづらかった

rolltoever_0712

RollToEverで「Code=2 Param=0」のエラーが出た場合の対処方法

iPhoneで撮影した複数枚の写真をワンタッチでEverNoteに自動転送してくれる便利アプリRol

dropbox_001

DropBoxのデータ保存場所を任意のディスクに変更する方法

DropBoxの保存場所を変更する方法。 デスクトップのタスクバー右下の△をクリックして Drop

tenpu_sugu_hiraku011

ThunderBird(サンダーバード)で添付ファイルを保存後すぐにデータを開く方法

昔からメールソフトはThunderBird(サンダーバード)を愛用しているのですが、一点不便に感じて

u2_sakujo001

iphoneの「ミュージック」から「U2」の楽曲を削除する方法

つい最近まで気づかなかったのですが、いつの頃からかiphoneの「ミュージック」に購入した覚えのない

excel_grah_jiku008

Excel(エクセル)で表から作成したグラフの軸を上下反転させる方法

excel(エクセル)2013で作成した表をもとにグラフを作成した時に、項目の上下の並び順を反転した

drop002

ソースネクスト「DropboxPro3年版」購入時の注意点と感想

デバイス間のファイル同期を自動で行ってくれる便利なストレージサービス「Dropbox(ドロップボック

Comment

  1. […] GMおよびOS X 10.11.6 El Capitanで、新たにYouTube.comの古いFlash動画(object版)をHTML 5(iframe版)へ置換するプラグインを追加しており、以下の様にYouTubeの全ての埋め込み動画がHTML5で再生されます。 […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

足元の冷えを解消!デスクワーカーにおすすめの足温グッズまとめ!

日がな一日座り続けで作業をしていると、血流が悪くなるのか、足元(つま先

ashi_c_008
足元の冷え解消!足温グッズレビュー(3) ホットマルチヒーター

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

ashi_b_002
足元の冷え解消!足温グッズレビュー(2) 山形電気あんか*参考

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

ashi_a_006
足元の冷え解消!足温グッズレビュー(1) デュアルヒータースリッパ

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

futa_001
掃除機にペットボトルの蓋が詰まってしまった場合の対処方法

部屋を掃除していたところ、掃除機でペットボトルのフタを吸い込んでしまい

→もっと見る

PAGE TOP ↑