html - Flash オブジェクトが CSS レイアウトをクラッシュさせますか? （firefox、chromeのみ、すべて完璧です！）

Question

スタックオーバーフロー コミュニティの皆さん、

フラッシュオブジェクト/埋め込みに問題があります...

それがイメージです...そうあるべきです。

そして、それはフラッシュオブジェクト/埋め込みの場合です...

実際には、「不透明度」CSS は Flash オブジェクト / 埋め込みでは機能しません。また、白い div は表示されません。しかし、黒い div を表示すると、意味がわかりません。

どうすればこれを修正できますか?

前もって感謝します ：）

Answer 1

フィドルをアップロードしていただきありがとうございます。ご覧のとおり、私はそれをフォークして、両方のブラウザーで動作するようにしました。

トリックは?wmode=transparent、YouTube URL で渡されるパラメーターに追加することでした。

ここにその問題に関するより多くの情報があります

そして、これがあなたの問題の解決策です：

フィドルのデモ

HTML

<iframe width="500" height="500" src="//www.youtube.com/embed/0lrrUwyTw2c?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

<div class="cover"></div>

CSS

body {
    margin: 0;
    padding: 0;
}
.cover {
    position: absolute;
    z-index: 2;
    border-radius: 0 50px 0 0;
    top: 0;
    left: 0;
    background: #767676;
    width: 500px;
    height: 500px;
}

コードを少し整理し、読みやすくしたことに注意してください。

編集

wmode=gputoという文字列からその場で変更できるボタンを備えた新しいフィドルを作成しwmode=transparentました。

jqueryを追加したことに注意してください。これは現在、ボタンのクリックで実行されるように装備されています...プロジェクトにとって意味のある他の方法でこれを確実に実装できます

新しいフィドル