Question

在YouTube嵌入版上使用css-transforms，至少在Safari 5和Firefox 4中呈现黑色视频.Chrome 11处理它就好了。

我在这里做了一个例子：http://jsfiddle.net/oskarrough/4vRzd/4/

我需要css-transform才能做一些奇特的布局定位。有没有办法，css或js，黑客它来显示视频？

Answer 1

我正在解决同样的问题。我没有做任何花哨的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>

Answer 2

您确定不能使用此功能：

iframe {
    position: relative;
    top: 100px
}

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

或margin-top: 100px或其他某个元素的否定margin？

有人不得不发布这个，因为你没有提到它们不是可行的选择。

Answer 3

uprence for lawrenceshen。

wmode =透明工作。

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
                }
            });
        }

Answer 4

对我来说，此问题仅发生在Windows 7和Windows 8上的 Firefox 4+ 中。它不会发生在任何其他浏览器或OS X上。

我花了好几个小时坚持这个问题。我以模式显示YouTube视频，该模式使用CSS3翻译进入视图。

我的解决方案是在模态出现后删除转换/转换类。一旦我这样做，YouTube嵌入就出现了，不再是空黑盒子。

更多细节：我使用animate.css并添加class =“animated fadeInDownBig”来向下滑动模态。一旦到达最终目的地，我再次删除这些课程。

这是一个非常奇怪的问题，我希望Mozilla很快能解决这个问题。

CSS转换和YouTube嵌入

4 个答案: