JQuery，淡入YouTube嵌入式iframe

Question

JQuery，淡入YouTube嵌入式iframe

jqueryiframeyoutube

6

我正在尝试淡入Youtube嵌入式iframe，但它只在IE9中有效，在其他最新的浏览器（Safari，Opera，Chrome，Firefiox）中无效。无论将不透明度设置为0，iframe都会立即显示。

我使用的是Windows系统。

我做错了什么？

附注：这对于Vimeo youtube iframe嵌入式播放器很有效。

JsFiddle:

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

- Toniq

2个回答

0

你应该在YouTube的URL中添加wmode=opaque。这样它就会平滑地淡出。像这样

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

感谢Canolucas在这里提供的答案：https://stackoverflow.com/a/14426131/1303927

- Sjaak Wish

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob W · Accepted Answer

出于安全考虑，当 iframe/最接近的层的 alpha 通道级别（不透明度/背景）降低时，内联框架将完全可见。因此，即使将不透明度设置为 0.99999，框架也会显示出来。

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

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

然后，动画化第二个 DIV，使其透明度为0。第一张图像的背景变得更加可见。在动画结束时，使用回调函数隐藏第一个 div：

为了允许用户在动画期间激活视频，请将单击事件处理程序绑定到 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://dev59.com/4Gs05IYBdhLWcg3wG-NR#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>