iframeタグを使えば、簡単にyoutubeの動画をサイトに組み込める

a0002_011891_m
最近忙しくなってきたんですけど、今暇になったんで学んだこと整理ってことで書きます。
あ、暇っていうのは仕事がこないっていう意味ではなく、待ちの状態であるという意味だから!いやほんと!

そもそもiframeタグって何よ

独立したインラインフレームを作ることができるタグです。簡単に、雑にいうと、いろいろ入れられる入れ子作るよ!その中に別のURLのもの入れて、あたかもぺージの1つの部分のように見せるよ!ってこと。
今回のように動画を入れたりとか、ファイスブックとかのSNS関係とか、そういう時に使う。

先に見本

<iframe width="幅" height="高さ" src="ここによーつべのURL?autoplay=0&showinfo=0&rel=0&modestbranding=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>

まず、iframeタグの属性から。

width・height

フレームの幅と高さ。

src

表示するURL。今回の場合は動画のURL。URLのあとの?以降は後述。

frameborder

境界線の表示について。0か1。youtubeの動画をおくなら、基本的に0でいいと思う。
ちなみに、この属性はHTML5には存在しない。CSSで設定する必要がある。

allowfullscreen

フルスクリーン許可。・・・なんだけど、これあってもなくてもいいらしい。一応おいてるって感じ。

iframeには他にも属性あるけど、動画おくだけならこれ以外使わないから説明省略。
srcの中にあった?以降は、youtube用のパラメータ。&でつなげていく。

autoplay

プレーヤーを読み込んだ時に自動再生するかどうか。0か1。
これに関しては0を推奨。いやマジで。1だとユーザー結構イライラすると思うよ。特別な理由がない限り0。ほんとに。

showinfo

動画を再生する前の状態で、タイトルとかが表示されるかされないか。0か1。
ブログとかで「この動画面白いですよー」とかなら1。特設ぺージのトップに置くとか(つまり、動画のタイトルや投稿者を見なくても公式であり、どんな内容か理解できる場合)なら0かな。
基本1になるとは思う。ここら辺はディレクターと話そう。

rel

動画が終わった時に関連動画が一覧で表示されるかされないか。0か1。
基本、0でいいと思う。

modestbranding

youtubeのロゴが表示されるかされないか。0か1。
正直ロゴは邪魔だから1推奨。

wmode

デフォルトの状態だとiframeのyoutubeはz-indexが効かない。
そのため、z-indexを使う場合はwmode=transparentを記述する必要がある。
これを書けばz-indexが効くようになる。

以上。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。