Drupal Technical

[Drupal] How to play video in pop-up using color box module

Varokky.jose | | 1 min read

Many of the sites now a days are designed to play video in pop-up window.This can be implemented using color box module and adding link to the video url in anchor tag with class as colorbox-load.Read on to know how to implement this.

  • Enable the color-box module in site and add colorbox plugin to sites/all/libraries folder.
  • In config/media/colorbox enable Colorbox load in Extra settings.
  • Provide iframe as link using anchor tag so as to play the video in popup.
  • Set the class of anchor tag to "colorbox-load" and href as the url to the video.

Refer the following code. 

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

Overlay div is used so that the div overlays over the iframe so that when video is clicked it plays in popup instead of playing in the iframe.Set z-index for iframe lower than z-index of overlay div and position the overlay div so as to overlap the iframe.This can be done using css styling.Refer the following css code. 

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

This will set the the ovelay div to be infront and the iframe to be behind the overlay div.This allows the video to be played in pop up window when the link is clicked instead of playing in the iframe.

Hope this Helps!

 

 

Related Topics