実用性の無いネタ的な内容です。
JavaScript等を使わず、CSSだけ
でYoutubeのフレームを作ってみ
ます。CSSだけで作ったからどう、
という訳ではないですけど・・
実用的な内容じゃないので適当に流してくだされば幸いです。
デモ
まずはデモから。Chrome以外では確認してないしフレームも適当ですのでその辺はスルーでお願いします。
再生できましたでしょうか。
方法は多分すぐに分かったと思いますけど、一応解説的なものを書いてみます。
Youtubeをz-indexに対応させる
Youtubeは通常z-indexを指定しても一番上に来てしまいます。ナビゲーションなどをposition:fixed;しているサイトなどでスクロールするとYoutubeだけ一番上を通ってしまう光景を見たこともあるのではないでしょうか。
これを、ちゃんと下に通るようにする、z-indexに対応させるにはYoutubeの貼り付け用コードに?wmode=transparentというパラメーターを加えます。
<iframe width="420" height="345" src="http://www.youtube.com/embed/tT8jA_pps3o?wmode=transparent" frameborder="0" allowfullscreen></iframe>
これでz-indexに対応させることが出来ました。
フレームとなる画像を重ねる
フレームとなる画像を動画のサイズに合わせて作成して、CSSで重ねます。
.foo{/*親要素*/
z-index:1;
position:relative;
margin:25px;
}
img{/*フレーム*/
z-index:2;
position:absolute;
top:0px;
left:0px;
}positionプロパティで普通に重ねられますね。これでフレームが出来ました。
でも、これだと上のレイヤーが邪魔で再生ボタンをクリックできません。
再生ボタンを押せるようにする
z-indexで重ねたフレームのうち、上のフレーム上でのマウスイベントを無効にして下の要素をクリック出来るようにします。
img{/*フレーム*/
z-index:2;
position:absolute;
top:0px;
left:0px;
pointer-events: none;/*マウス操作を無視する*/
}pointer-events: none;でマウスの操作を無視させます。これで、フレームの下のYoutubeの再生ボタンをクリックする事が出来ますね。
ゴール
再生ボタンを追加して同じようにpositionプロパティとpointer-eventsを指定すれば完成です。
pointer-eventsで重ねたフレームは全てクリックが無効になるので、その下のYoutubeの操作は全て行えます。見えてないだけで、操作バーや音量も調整できてしまいます。また、再生ボタンを停止ボタンにする、などを実装するなら勿論API等が必要になります。
雑感
途中で出てきたpointer-eventsですが、これを使えば簡単にクリックジャッキングが出来てしまうのでセキュリティ面でよく指摘されています。なので、今後どうなるか分かりません。IEは勿論対応していませんが、JavaScriptで上のフレームで受けたマウスイベントを下の層に転送する、という方法を使えば可能かもしれません（※未検証ですけど）
と言うわけで冒頭で書いたように実用性はありません。YoutubeもVimeoみたいに手軽に使えると嬉しいんですけどね。今日はそれ言いたいだけ。
以上です。