WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

YouTube動画のパラメーター

基本のコード

貼り付けるYouTube動画から共有→埋め込みで出てくるソース

<iframe src="動画のソース" width="560" height="315" frameborder="0" allowFullscreen>

src

再生する動画のURL

width,height

大きさの設定。縦横比率を間違えると歪む。
小さすぎると再生できない場合がある。

frameborder

埋め込み時のプレイヤーに枠線をつけるかどうか。
frameborder="0"…枠線無し
frameborder="1"…枠線をつける

HTML5で廃止されたがIE8に対応するためには残しておいた方が良い。
CSSでborder: none;でも消せる(IE8未対応)

allowfullscreen

あり→全画面表示ができるようにする
なし→全画面表示ができないようにする


追加できるパラメーター

再生後に関連動画を表示しない

貼り付けるYouTube動画を表示し、共有→埋め込み→もっと見るで
出てくるチェックボックスの中から
「動画が終わったら関連動画を表示する」のチェックをはずす。

するとソースの動画ソースの後に「?rel=0」とついているのが分かる。

<iframe src="動画のソース?rel=0" width="560" height="315" frameborder="0" allowFullscreen>

srcのURLの最後に「?rel=0」を書くと関連動画が表示されないようになる。

繰り返し再生

srcのURLの最後に「?loop=1」と入れる。

自動的に動画を再生させる

srcのURLの最後に「?autoplay=1」と入れる。

指定の位置から動画を再生させる

srcのURLの最後に「?start=再生開始位置(秒数)」と入れる。

指定の位置で動画を停止させる

srcのURLの最後に「?end=再生停止位置(秒数)」と入れる。

指定の区間だけを再生させる

上記の2つのコードを組み合わせると可能になる。

例: ?start=20&end=30

複数のコードを設定したい場合は「&」で繋ぐようにする。順番は任意。

動画の画質を指定して再生させる

srcのURLの最後に「?vq=値」を追加。

この指定は強制的にその画質で再生されるため、
回線が弱い環境での再生が想定される場合は、
設定前に検討する必要がある。

値: highres(その動画の一番高い画質)
hd1080
hd720
large
medium
small

字幕を表示させる

?cc_load_policy=1→字幕ON
?cc_load_policy=0→字幕OFF

アノテーションを非表示にする

アノテーションとは、YouTubeの動画上に表示させることができるクリック可能なテキストエリアのこと。
YouTubeのサイト上では表示したくても、サイトの埋め込み上では表示したくない場合。

?iv_load_policy=1→アノテーションOFF
?iv_load_policy=3→アノテーションON

キーボードからの操作を無効にする

キーボード上で動画の再生や早送りができる機能を無効にする。

?disablekb=0→キーボード操作有効
?disablekb=1→キーボード操作無効