5

在 YouTube 嵌入上使用 css-transforms 至少在 Safari 5 和 Firefox 4 中呈现黑色视频。Chrome 11 处理得很好。

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

我需要 css-transform 来做一些花哨的布局定位。有没有办法，css或js，破解它来显示视频？

4

4 回答 4

5

我现在正在解决同样的问题。我没有做任何花哨的 css 转换，只是缩放。

虽然工作不完美，但我使用 wmode=transparent 选项让视频显示。

IE

<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 上。

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

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

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

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

于 2013-02-06T09:45:10.107 回答