CODEWITHSUNDEEP
javascripthtmlcss
adibouf
adibouf

Reputation: 171

DIV above iframe

I want to place a "PLAY" div above each iframe. I want to do it automatically.

I manage to do that manually but I don't know how to do it with a script , or with css.

Here is my HTML markup : 

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

And my Javascript code : 

$('#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");

I'm using z-index and position attributes to place my div manually above the iframe, but I don't think it's a good idea to do it automatically.

Thanks

Upvotes: 1

Views: 2646

Answers (2)

Jean-Paul
Jean-Paul

Reputation: 21150

In addition to Matyas his answer, I have altered his code a bit such that it is now fully implementable. First, take a look at the demo before I will explain all the details:

SEE DEMO CODE HERE

enter image description here

As you can see, I 'soft coded' all the widths and the heights such that the overlayDiv is placed exactly in the middle of the iFrame. You can change the width and the height of the overlayDiv to whatever you want and the script will automatically adjust the position of the start button.

What is very important is that you must have the following order in your HTML for this to work:

<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>

Where the width and height of vidFrame doesn't have to be established beforehand because it will become the height of the iFrame.

Also, mind the following details:

  • wmode=opaque is the first argument we give to the video (must be the absolute first)
  • we enable the enablejsapi=1 such that we gain control over playing (and pausing) the video

The jQuery that I use is the following:

$.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();                        
    });
}

Note that, eventhough it is lengthy, it explicitly calculates the middle of the iFrame. Hence, shorter methods are possible but this one will make you understand exactly what is happening.

Now another thing: yt players always have the ugly red play button in the middle of their iFrame when loading a video.

There is a little hack to make this button disappear, namely:

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

So essentially we play and then immediately pause the video to make the button disappear. But mind you: this wil not work on mobile devices. A very big advantage of this is that the video will automatically start buffering which is an advantage for the user.

Furthermore, the jsFiddle is self-explanatory so just read it through and try to understand it.

I hope this answers your question. Good luck!

Upvotes: 1

Matyas
Matyas

Reputation: 13702

$('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
});

Initially your .overlayDiv should have the following styles:

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

I haven't tested it out, Just written it from scratch while my build was running. But this is the idea I'd go with. You might have to tinker with the positioning.

Upvotes: 1

Related Questions