DIV以上iframe

Question

我想在每个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上方，但我不认为自动执行它是个好主意。

由于

Answer 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 */
}

我还没有测试过，只是在我的构建运行时从头开始编写它。但这是我的想法。你可能不得不修补定位。

Answer 2

除了Matyas他的答案之外，我已经改变了他的代码，现在它完全可以实现。 首先，在我解释所有细节之前先看看演示：

SEE DEMO CODE HERE

正如您所看到的，我'软编码'所有宽度和高度，使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>  

width的{​​{1}}和height不必事先建立，因为它将成为vidFrame的高度。

另外，请注意以下细节：

• iFrame是我们为视频提供的第一个参数（必须是绝对的第一个）
• 我们启用wmode=opaque，以便我们控制播放（和暂停）视频

我使用的jQuery如下：

enablejsapi=1

请注意，虽然它很长，但它会明确计算iFrame的中间部分。因此，可以使用更短的方法，但这一方法可以让您准确了解正在发生的事情。

现在另一件事：$.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中间总是有丑陋的红色播放按钮。

让这个按钮消失有点破解，即：

yt players

基本上我们播放然后立即暂停视频以使按钮消失。 但请注意：这不适用于移动设备。这样做的一个非常大的优势是视频将自动启动function onPlayerReady(event){ //THIS IS THE TRICK THAT YOU MIGH WANT TO REMOVE player.playVideo(); player.pauseVideo(); } ，这对用户来说是一个优势。

此外，jsFiddle是不言自明的，所以请仔细阅读并尝试理解它。

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