How to play videos in color box

Below snippet explain how can we display youtube video in color box with custom script

  • Add this code on page
    jQuery(function ($) {
        jQuery('.video_youtube').click(function(event) {
            var loc = jQuery(this).attr('href');
            // looking for the first param to be 'v='
            var id = loc.split("?")[1].split("&")[0].split("=")[1];
            event.preventDefault();
            jQuery.colorbox({html:'<iframe id="vid_frame" width="640" height="360" src="http://www.youtube.com/embed/' + id +'?enablejsapi=1&autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>'});
        });
    });
  • 2. Sample HTML to call color box
    <a href="https://www.youtube.com/watch?v=rF1X12PE6PY" class="video_youtube">Click Here</a>

Share this post

Leave a comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.