JQuery，淡入 youtube iframe 嵌入答案

【问题标题】：JQuery, fade in youtube iframe embedJQuery，淡入 youtube iframe 嵌入
【发布时间】：2011-12-13 12:48:38
【问题描述】：

我正在尝试淡入 youtube iframe embed，但它仅适用于 IE9，所有其他最新浏览器（Safari、Opera、Chrome、Firefiox）都不起作用。无论将不透明度设置为 0，iframe 都会立即显示。

我在 Windows 上。

我哪里错了？

ps：这适用于 Vimeo youtube iframe 嵌入。

JsFiddle：

http://jsfiddle.net/jgtSS/26/

【问题讨论】：

标签： jquery iframe youtube

【解决方案1】：

出于安全原因，当 iframe/最近图层的 Alpha 通道级别（不透明度/背景）降低时，内嵌框架变得完全可见。因此，即使不透明度设置为0.99999，框架也会显示出来。

我已经为这个问题创建了一个解决方案：创建两个大小相同的图层，并将它们添加到 iFrame 的父级之后。

为第一张图片附加背景，这是视频的预览
将第二个div的背景设置为页面的背景，例如white。

然后，将第二个 DIV 设置为 opacity 0。第一张图像的背景变得更加明显。在动画结束时，使用回调函数隐藏第一个 div：

要允许用户在动画期间激活视频，请将 click 事件处理程序绑定到立即隐藏图层的 DIV，并调用内联视频的 playVideo 方法。

要调用playVideo 方法，您需要对嵌入视频的引用。由于您尚未使用 YouTube 视频 API 创建视频，因此您不能使用全局变量来访问视频。不久前，我创建了一个函数来调用嵌入式视频的方法。
阅读：YouTube iframe API: how do I control a iframe player that's already in the HTML?

最终代码

我在 fiddle:http://jsfiddle.net/jgtSS/34/ 上创建了一个实时示例。完整代码如下所示。

<html><head>
<style>
#holder, #ID-of-first-div, #ID-of-second-div{
    position:absolute;
    width:320px;
    height:240px;
    top:0px;
    left:0px;
}
#ID-of-first-div, #ID-of-second-div {
    background: #FFF;
}
#btn1{
    position:absolute;
    background:#09C;
    width:40px;
    height:40px;
    top:250px;
    left:0px;
      
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $('#btn1').click(function(){
        var vid_id = $('#player').get(0).src.match(/embed\/([^?]+)/)[1];
        var vid_bg = 'http://i2.ytimg.com/vi/'+vid_id+'/hqdefault.jpg';
        $('<img>').attr("src", vid_bg).css({width:'100%',height:'100%',border:'none'}).appendTo('#ID-of-first-div');
        $('#ID-of-second-div').animate({opacity: 0 }, 3000, function(){
            $('#ID-of-first-div').hide();
        });
        var both = $('#ID-of-first-div, #ID-of-second-div');
        both.click(function(){
            both.hide();
            callPlayer('player', 'playVideo');
        });
    });
});
/*
 * @author       Rob W (https://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html/7513356#7513356)
 * @description  Executes function on a framed YouTube video (see previous link)
 *               For a full list of possible functions, see:
 *               http://code.google.com/apis/youtube/js_api_reference.html
 * @param String frame_id The id of the div containing the frame
 * @param String func     Desired function to call, eg. "playVideo"
 * @param Array  args     (optional) List of arguments to pass to function func*/
function callPlayer(frame_id, func, args){
    if(!document.getElementById(frame_id)) return;
    args = args || [];

    /*Searches the document for the IFRAME with id=frame_id*/
    var all_iframes = document.getElementsByTagName("iframe");
    for(var i=0, len=all_iframes.length; i<len; i++){
        if(all_iframes[i].id == frame_id || all_iframes[i].parentNode.id == frame_id){
           /*The index of the IFRAME element equals the index of the iframe in
             the frames object (<frame> . */
           window.frames[i].postMessage(JSON.stringify({
                "event": "command",
                "func": func,
                "args": args,
                "id": 1/*Can be omitted.*/
            }), "*");
        }
    }
}
</script>
</head><body>
<div id="holder">
   <iframe id="player" type="text/html" width="320" height="240"
  src="http://www.youtube.com/embed/u1zgFlCw8Aw?wmode=transparent?enablejsapi=1"
  frameborder="0"></iframe>
</div>
<div id="ID-of-first-div"></div>
<div id="ID-of-second-div"></div>
      
<div id="btn1"></div>
</body></html>

【讨论】：

首先，感谢您的回答！就像我已经说过的，这就像嵌入 Vimeo iframe 的魅力：jsfiddle.net/jgtSS/33 不知道为什么它不适用于 youtube。对于您的回答，这意味着我需要预览图像。如何获取 youtube 视频的预览图像？
@Toniq http://i2.ytimg.com/vi/VIDEOID here/hqdefault.jpg，例如：i2.ytimg.com/vi/u1zgFlCw8Aw/hqdefault.jpg。我将更新我的答案以自动化图片添加方法。
这真的有点矫枉过正：P 顺便说一句，关于一些非常相似的事情，我试图实现这种相似性，我已经在某处发布了这个问题：我正在尝试淡出位于 youtube iframe 上方的 div嵌入。我做了一个 jsfiddle，你需要点击蓝色的 div，它应该会淡出，但它也会立即跳到 iframe 之下。 jsfiddle.net/jgtSS/2 有没有办法防止这种情况发生？为什么它会改变 z 指数？（我希望它保持在上面）
另外，这个获取视频预览的网址是防弹的吗？我听说这些域有时会发生变化？
@Toniq 正如我在回答中提到的，如果 [frame or first-level-layer] 具有大于或等于 1 的 opacity 或 alpha 通道，则将显示框架的内容. 第一层，我指的是（部分）在 IFrame 之上的第一个元素。 关于网址：它将匹配 YouTube 上的任何视频 ID。如果您遇到有关 ID 的问题，请随时提出问题。

【解决方案2】：

您应该将 wmode=opaque 添加到 youtube 网址。比它会顺利褪色。喜欢htis

<iframe src="http://www.youtube.com/embed/a-TrP8Z3Cb8?wmode=opaque" ...

感谢 Canolucas awnser 在这里找到：https://stackoverflow.com/a/14426131/1303927

【讨论】：