1

我想在每个 iframe 上方放置一个“PLAY”div。我想自动完成。

我设法手动做到这一点，但我不知道如何使用脚本或 css 来做到这一点。

这是我的 HTML 标记：

<ul data-role="listview" id="resultat"></ul>

还有我的 Javascript 代码：

$('#resultat').append('<li class="liste" ><iframe id="ytplayer" type="text/html" width="140" height="100" src="http://www.youtube.com/embed/RD98kNOBrNs?hd=1&rel=0&autohide=1&showinfo=0&wmode=opaque" frameborder="0"/></li>').listview("refresh");

我正在使用 z-index 和 position 属性将我的 div 手动放置在 iframe 上方，但我认为自动执行它不是一个好主意。

谢谢

4

2 回答 2

1 
$('iframe').each(function(idx, iframe){   // for each iframe
    var $iframe = $(iframe);              // take its jquery reference
    $('.overlayDiv')                      // grab the overlay template you wish to place over each
       .clone()                           // clone it
       .appendTo('body')                  // add it to the end of your page
       .css({                             // resize and position the overlay 
          top: $iframe.offset().top,      // to fit just above the iframe
          left: $iframe.offset().left,
          height: $iframe.height(),
          width: $iframe.width(),
       }).show();                         // show the hidden (by CSS) overlay
});

最初，您.overlayDiv应该具有以下样式：

.overlayDiv {
    position: absolute;   /* so when we position by js it will be above the iframe*/
    display: none;        /* the master tempalte should be hidden */
    z-index: 4953;        /* make sure the overlay appears above other elements */
}

我还没有测试它，只是在我的构建运行时从头开始编写。但这是我的想法。您可能需要修改定位。

于 2013-07-04T08:55:25.747 回答
1

除了 Matyas 他的回答之外，我还稍微修改了他的代码，使其现在可以完全实现。首先，在我解释所有细节之前先看一下演示：

在此处查看演示代码

在此处输入图像描述

如您所见，我对所有宽度和高度进行了“软编码”，以便将它们overlayDiv恰好放置在 iFrame 的中间。您可以将宽度和高度更改为overlayDiv您想要的任何内容，脚本将自动调整开始按钮的位置。

非常重要的是，您的 HTML 中必须具有以下顺序才能使其正常工作：

<div id="vidFrame" class="play">
 <iframe id="video" class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/-PZLM-CmuJ0?wmode=opaque&hd=1&rel=0&autohide=1&showinfo=0&enablejsapi=1" frameborder="0"></iframe>
</div>

<div class="overlayDiv">
    <img src="https://www.ameliaconcours.org/UploadedContent/Lamborghini%20Logo_Crest_4C_S.png" alt="facebook" width="90px" />
</div>

不必事先建立widthandheight的地方，因为它将成为.vidFrameiFrame

另外，请注意以下细节：

  • wmode=opaque是我们给视频的第一个参数（必须是绝对的第一个）
  • 我们启用enablejsapi=1这样我们可以控制播放（和暂停）视频

我使用的 jQuery 如下：

$.fn.loadOverlay = function() {
    $('iframe').each(function(idx, iframe){     
        var imageHeight = $('.overlayDiv').height();
        var imageWidth = $('.overlayDiv').width();
        var marginTop = $('#video').height();
        var marginTop = marginTop/2-imageHeight/2;    
        var marginLeft = $('#video').width();
        var marginLeft = marginLeft/2-imageWidth/2;     
        
        $('.overlayDiv')                      
        .clone()                           
        .appendTo('body')                  
        .css({                              
            top: marginTop,      
            left: marginLeft,
        }).show();                        
    });
}

请注意，即使它很长，它也会显式计算 iFrame 的中间部分。因此，更短的方法是可能的，但这个方法会让您准确了解正在发生的事情。

现在还有一件事：加载视频时，iFrame 中间yt players总是有丑陋的红色播放按钮。

有一个小技巧可以让这个按钮消失，即：

function onPlayerReady(event){
        //THIS IS THE TRICK THAT YOU MIGH WANT TO REMOVE
        player.playVideo();
        player.pauseVideo();
}

所以基本上我们播放然后立即暂停视频以使按钮消失。但请注意：这不适用于移动设备。这样做的一个非常大的优势是视频将自动开始buffering，这对用户来说是一个优势。

此外，jsFiddle 是不言自明的，因此只需通读并尝试理解它。

我希望这回答了你的问题。祝你好运！

于 2013-07-04T11:11:06.720 回答