Drupal Technical

[Drupal] How to overlay one div over another

Varokky.jose | | 2 min read

One of the requirements of the client was to play video in the pop-up window instead of playing it in Iframe. We accomplished this by adding overlay div over Iframe, which would suppress the ability of Iframe to play video. Read on to know how we did it.

Refer the following example to know how to overlay div over another div. The video used in this example is played in pop-up window using the colorbox. Iframe for video is provided as a link to the anchor tag.

<a class="colorbox-load" href="http://www.youtube.com/embed/videoid?fs=1&width=640&height=480&hl=en_US1&iframe=true&rel=0"?width=300&height=150&top=40&right=20&iframe=true">
  <iframe width="306" height="144"  frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="http://www.youtube.com/embed/videoid" id="video_frame"></iframe>
  <div class="overlay"></div>
</a>

The div can be overlayed over iframe using z-index and absolute positioning. Iframe should have z-index lower than the div having class as overlay. Style the overlay div to the same height and width as the iframe, so that it does not affect the functionality of any other divs. Position it using absolute positioning so that its position is the same as that of iframe.

Add the following css to the overlay div to set the position, z-index, and background color of the div.

.overlay {
  z-index: 1;  
  background-color: transparent;
  height: 144px;
  left: 608px;
  overflow: hidden;
  position: absolute;
  top: 192px;
  width:306px;
}

Set the z-index of iframe to be less than the overlay div.

#video_frame {
  position: relative; 
  z-index: 0;
}

This will set the the overlay div to the front and the iframe behind the overlay div. This enables the video to be played in the pop-up window when the link is clicked instead of playing it in the iframe.

 

 

Related Topics