我想在每個iframe上放置一個「PLAY」div。我想自動完成。iframe上方的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和位置屬性來把我的div手動的iframe以上，但我不要認爲這是自動完成的好主意。

感謝

來源

2013-07-04 adibouf

除了Matyas的回答，我已經改變了他的代碼，使它現在完全可以實現。首先，來看看演示之前，我會解釋所有的細節：

SEE DEMO CODE HERE

enter image description 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和vidFrameheight不必事先建立，因爲它會成爲iFrame的高度。

而且，記住以下細節：

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的中間值。因此，更短的方法是可能的，但這個會讓你明白到底發生了什麼。

現在，另一件事：yt players總是有醜陋的紅色播放按鈕在他們的iFrame的中間加載視頻時。

有一個小黑客，使該按鈕消失，即：

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

所以基本上我們玩，然後立即暫停視頻，使該按鈕消失。但請記住：這不適用於移動設備。這樣做的一大優點是視頻會自動啓動buffering，這對用戶來說是一個優勢。

此外，jsFiddle不言自明，所以只需閱讀並理解它即可。

我希望這能回答你的問題。祝你好運！

來源

2013-07-04 11:11:06

謝謝@讓 - 保羅 – adibouf

$('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-04 08:55:25 Matyas

非常感謝。我看到了這個主意，但它不起作用。我會鼓搗它 – adibouf

iframe上方的DIV

回答

SEE DEMO CODE HERE

相關問題