Home / Frontend Codes and Demos / API's / YouTube / Open Dynamic Youtube Videos in Fancybox or Modal window or Lightbox

This tutorial explain how to embed the dynamic YouTube videos or how to play youtube videos in fancybox / Light box on clicking the YouTube thumbnail. W3 Tweaks added the YouTube videos in fancy box on top off YouTube API video search tutorial from w3 Tweaks [link]. From this tutorial user's can able to achieve to open the YouTube videos in Fancy Box with dynamic YouTube videos.

Open Dynamic Youtube Videos in Fancybox or Modal window or Lightbox

This tutorial explain how to embed the dynamic YouTube videos or how to play youtube videos in fancybox / Light box on clicking the YouTube thumbnail. W3 Tweaks added the YouTube videos in fancy box on top off YouTube API video search tutorial from w3 Tweaks [link]. From this tutorial user’s can able to achieve to open the YouTube videos in Fancy Box with dynamic YouTube videos.

open dynamic youtube videos in modelbox fancybox

How to open YouTube videos in Fancybox? Learn how to play YouTube videos in Fancybox.

JavaScript Code

 	var $midlayer = $('.modal-body'); 	$('#videoModal').on('show.bs.modal', function (event) {  	var vid = event.relatedTarget.rel; 	var url = &quot;//youtube.com/embed/&quot;+vid+&quot;?autoplay=0&autohide=1&modestbranding=1&rel=1&hd=1&quot;; 	var iframe = '<iframe />';  	var width_f = '100%';  	var height_f = 400;  	var frameborder = 0;  	jQuery(iframe, {  		name: 'videoframe',  		id: 'videoframe',  		src: url,  		width: width_f,  		height: height_f,  		frameborder: 0,  		class: 'youtube-player',  		type: 'text/html',  		allowfullscreen: true  	}).appendTo($midlayer); });  	$('#videoModal').on('hide.bs.modal', function (event) {  		$('div.modal-body').html('');  	}); 

FancyBox CSS

 <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">     	<div class="modal-dialog">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>             </div>             <div class="modal-body"></div>         </div>     </div> </div> 

FancyBox / Modal window

Download Demo

About CV

I'm frontend developer

Check Also

Get Youtube Related Videos using Youtube V3 API

This tutorial will explain how to get Youtube Related Videos using Youtube V3 API. YouTube will return related videos based on the youtube videoid. Also Youtube have given option for pagination and from this tutorial w3 Tweaks will explain how to achive YouTube pagination. So we can start our tutorial.