CSS 转换和 YouTube 嵌入答案

【问题标题】：CSS transform and YouTube embedsCSS 转换和 YouTube 嵌入
【发布时间】：2013-02-10 23:40:12
【问题描述】：

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

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

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

【问题讨论】：

标签： css css-transitions

【解决方案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>

【讨论】：

有点迟到的评论，但这也修复了一个淡出/淡出错误，即在 Windows 5.1.x 的 Safari 下，嵌入 youtube iframe 的视频不会使用 jQuery 淡出。谢谢。

【解决方案2】：

你确定不能用这个代替吗：

iframe {
    position: relative;
    top: 100px
}

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

或者margin-top: 100px，或者其他元素上的否定margin？

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

【讨论】：

我应该澄清一下，我需要使用 css-transform。问题似乎在于浏览器支持，这意味着我们现在只能等待。

【解决方案3】：

为劳伦森点赞。

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

【讨论】：

【解决方案4】：

对我来说，这个问题只发生在 Windows 7 和 Windows 8 上的 Firefox 4+ 中。在任何其他浏览器或 OS X 上都没有发生这种情况。

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

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

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

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

【讨论】：