Bootstrap Modal Inside Youtube Video With Jquery

File Size:66.69 KB
Views Total:386
Last Update:December 22, 2017
Publish Date:December 22, 2017
Official Website:Go to website
License:MIT

YT Modal/popup a light weight plugin in jquery with fully customize. It also requires jQuery YouTubeDefaultImageLoader.js to insert Youtube video iframes with post images into your web page.If you need to enter on the same page several YouTube videos and do not want that to penalize the loading time of it, you can load them with this method, which first loads only the default images for each video and then load the video in a bootstrap modal using the iframe_api provided by YouTube.

How to use it:

Include Bootstrap 3 framework and jQuery JavaScript library loaded:

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Load the jQuery YouTubeDefaultImageLoader.js

<link rel="stylesheet" href="css/YouTubeDefaultImageLoader.css">
<script src="js/YouTubeDefaultImageLoader.js"></script>

Embed an Youtube video into your document as follow.You can use the DIV’s IDattribute to specify the ID of Youtube video you want to embed.

<div id="y73mJZdMEcw"
  class="youtubeVideoLoader">
</div>

DONE 🙂