YouTube 動画プレーヤーの上に静止画像を配置したいと考えています。しかし、彼らはどうにかしてこれが起こらないようにブロックしているように見えますか?
これまでのところ、YouTube プレーヤーよりも高い z-index を設定しようとしましたが、これは機能しません。
例えば：
<img src="../example.png"/ width="100" height="100" class="image" />
<iframe width="420" height="315" src="http://www.youtube.com/embed/k6U-i4gXkLM" frameborder="0" allowfullscreen></iframe>
.image { position: absolute; z-index: 10000; }
YouTube iframe URL に wmode=transparent を追加できるはずです。見る：
実際の例:
http://www.parentmap.local/article/webinar-parents-guide-to-college-admissions
フライアウト メニューがビデオ iframe と重なっていることに注目してください。
何らかの理由でそれが機能しない場合は、javascript を使用して YouTube のプレビュー画像を読み込み、その上にオーバーレイを配置できます。誰かが実際に要素をクリックしたときにのみ、実際の iframe を読み込みます。
クイックグーグルは、YouTubeの画像でこれを見つけます：
http://www.reelseo.com/youtube-thumbnail-image/
プレビュー画像 URL のそのページの例:
