新しいYouTubeの音量部分、シークバー(コントロール部分) | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery


★ TouTube は新しくなったので、シークバー・音量の色などが以前の様に
  指定できないようです。(コントーロール部分)

注意:新しくなったとは、Version=3(AS3)の動画です。



● YouTube パラメータ説明は下記を参照
https://developers.google.com/youtube/player_parameters?hl=jp#controls


● 色については下記を参照
http://apiblog.youtube.com/2011/08/coming-soon-dark-player-for-embeds.html



■ 色の指定方法

● 音量などの部分

&theme=dark   ・・・ 黒(指定しない場合は、これが初期値)
&theme=light  ・・・ 白

● 進み具合(シークバー部分)

&color=red  ・・・ 赤(指定しない場合は、これが初期値)
&color=white ・・・ 白



① 何も指定しない場合(&theme=dark&color=red)

<iframe width="300" height="169" src="http://www.youtube.com/embed/vEVq_Bx7_KY?rel=0" frameborder="0" allowfullscreen></iframe>





② 音量などの部分が黒で、シークバー部分が白(&theme=dark&color=white)

<iframe width="300" height="169" src="http://www.youtube.com/embed/vEVq_Bx7_KY?rel=0&theme=dark&color=white" frameborder="0" allowfullscreen></iframe>





③ 音量などの部分が白で、シークバー部分が赤(&theme=light&color=red)

<iframe width="300" height="169" src="http://www.youtube.com/embed/vEVq_Bx7_KY?rel=0&theme=light&color=red" frameborder="0" allowfullscreen></iframe>





④ 音量などの部分が白で、シークバー部分が白(&theme=light&color=white)

<iframe width="300" height="169" src="http://www.youtube.com/embed/vEVq_Bx7_KY?rel=0&theme=light&color=white" frameborder="0" allowfullscreen></iframe>









■ 再生時にシークバー・音量部分が自動的に隠れる


&autohide=2  ・・・ シークバー・音量部分が自動的に隠れる。ビデオ再生バーは隠れない。
(指定しない場合は、これが初期値)
&autohide=0  ・・・ シークバー・音量部分が隠れない
&autohide=1  ・・・ シークバー・音量部分が隠れる。ビデオ再生バーも隠れる。
&controls=0  ・・・ シークバー・音量部分を表示しない。


① シークバー・音量部分が自動的に隠れる(&autohide=2)
ビデオ再生バーは隠れない。(一番下に表示される細い再生の進み具合を
表示する赤いバー)

<iframe width="300" height="169" src="http://www.youtube.com/embed/vEVq_Bx7_KY?rel=0" frameborder="0" allowfullscreen></iframe>





② シークバー・音量部分が隠れない(&autohide=0)

<iframe width="300" height="169" src="http://www.youtube.com/embed/vEVq_Bx7_KY?rel=0&autohide=0" frameborder="0" allowfullscreen></iframe>






③ シークバー・音量部分が隠るが、ビデオ再生バーも隠れる(&autohide=1)
(一番下に表示される細い再生の進み具合を
表示する赤いバー)

<iframe width="300" height="169" src="http://www.youtube.com/embed/vEVq_Bx7_KY?rel=0&autohide=1" frameborder="0" allowfullscreen></iframe>






④ シークバー・音量部分を表示しない(&controls=0 )

<iframe width="300" height="169" src="http://www.youtube.com/embed/vEVq_Bx7_KY?rel=0&controls=0" frameborder="0" allowfullscreen></iframe>








★ TouTube のパラメータの設定方法

src="http://www.youtube.com/embed/vEVq_Bx7_KY?rel=0&autoplay=1"
vEVq_Bx7_KY がビデオIDになります。
その後に、パラメータをつなげていきますが、最初のつなげるパラメータは
? でつなげます。それ以降は、全部 & でつなげます

例 ・・・ 上記とは逆の場合の例(autoplay=1とrel=0を逆にした場合)

src="http://www.youtube.com/embed/vEVq_Bx7_KY?autoplay=1&rel=0"