最近忙しくなってきたんですけど、今暇になったんで学んだこと整理ってことで書きます。
あ、暇っていうのは仕事がこないっていう意味ではなく、待ちの状態であるという意味だから!いやほんと!
そもそも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が効くようになる。
以上。