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で送る

関連記事

【непереводимая.рф】アナリティクスのデータに紛れる検索ワード型スパムに注意!

本日Googleアナリティクスを眺めていたところ、いかにも怪しげなデータを発見しました。 結論

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

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

excel上のオブジェクト

エクセル(excel)2013でシート上の図形(オブジェクト)を一括で削除する方法

私はエクセル(excel)2013でスケジュールなどを管理しており、シート上に多くの図形(オブジェク

受信メールの添付ファイル"winmail.dat"を開く方法

正常なexcel(エクセル)データを添付で送ってもらったはずなのに、添付ファイルが「winmail.

windowsのフォルダ容量(サイズ)を一覧表示できるフリーソフトFolderSizeのインストールと使用方法

windowsでは、データの容量(サイズ)を知りたい場合は、エクスプローラ(ウィンドウ)の"サイズ"

Lhaplusでzipファイル解凍時にエラーが出てしまう場合の対処法

無料で商用可能なシルエット素材を配布しているサイト「シルエットAC(http://www.silho

QuickAdsence(クイックアドセンス)の文字化けを修正する方法

WordPressの定番プラグイン、QuickAdsence(クイックアドセンス)。 私の場合

WORD(ワード)2013で"名前をつけて保存(別名保存)"のショートカットキーを変更する方法

以前「WORD(ワード)2013でルビを振る動作にショートカットを割りあてる方法」という記事を書きま

ゆうパックの宛名印字サービスを利用したらものすごく便利だった

7~8個程度ではありますが、毎月決まった取引先に小包を郵送する機会があります。 基本的に「ゆう

どちらがお得!? amazonとhonto(ホント)を比較してみた

わたくし、普段のネット通販はもっぱらAmazon(アマゾン)を利用しています。 特に不便も感じ

Comment

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

Message

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

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑