5

YouTube埋め込みでcss-transformsを使用すると、少なくともSafari5とFirefox4でビデオが黒くなります。Chrome11はそれを問題なく処理します。

ここに例を示しました：http：//jsfiddle.net/oskarrough/4vRzd/4/

派手なレイアウトの配置を行うには、css-transformが必要です。ビデオを表示するためにそれをハックする方法、cssまたはjsはありますか？

4

4 に答える 4

5

私は今同じ問題に取り組んでいます。私は派手なCSS変換を行っておらず、スケーリングだけを行っています。

完全には機能していませんが、wmode=transparent オプションを使用してビデオを表示しました。

すなわち

<iframe width='640' height='480' frameborder='0' src='http://www.youtube.com/embed/YOUTUBE_VIDEO_ID?wmode=transparent' type='text/html' class='youtube-player'></iframe>
于 2012-04-30T08:32:14.117 に答える
2

代わりにこれを使用できないと確信していますか:

iframe {
    position: relative;
    top: 100px
}

http://jsfiddle.net/4vRzd/5/

またはmargin-top: 100px、またはmargin他の要素のマイナスですか？

それらが実行可能なオプションではないことをあなたが言及しなかったので、誰かがこれを投稿しなければなりませんでした.

于 2011-04-15T10:33:30.490 に答える
0

ローレンスシェンに賛成する。

wmode=transparentが機能しました。

var player;
        function onYouTubeIframeAPIReady() {
            console.log("onYouTubeIframeAPIReady");
            player = new YT.Player('gallery-youtube', {
                height: '594',
                width: '883',
                videoId: 'u1zgFlCw8Aw',
                playerVars: { "modestbranding":1, "wmode":"transparent" },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
于 2013-01-31T18:56:29.183 に答える
0

私にとって、この問題はWindows 7 および Windows 8 の Firefox 4+ でのみ発生しました。他のブラウザや OS X では発生しませんでした。

私はこの問題に何時間も費やしました。CSS3 翻訳を使用してビューにスライドするモーダルで YouTube ビデオを表示します。

私の解決策は、モーダルが表示されたら変換/遷移クラスを削除することでした。
これを行うと、YouTube の埋め込みが表示され、空のブラック ボックスはなくなりました。

詳細: animate.cssを使用し、class="animated fadeInDownBig" を追加して、モーダルを下にスライドさせます。最終目的地に到達したら、それらのクラスを再び削除します。

これは非常に奇妙な問題であり、Mozilla がすぐに修正してくれることを願っています。

于 2013-02-06T09:45:10.107 に答える