Bootstrap modal YouTube video autoplay

jQuery Plugins jQuery Other Plugins jQuery YoutubeModal

Chrome, IE9+, FireFox, Opera, Safari#Modal#Bootstrap#Youtube#video

Just another jQuery plugin which enables you to open and autoplay Youtube videos in a popup window using Bootstrap modal component. Supports both Bootstrap 3 and Bootstrap 4.

See also:

• Youtube Video Modal with jQuery and Bootstrap 3 - YTModal

How to use it:

1. Load the jQuery YoutubeModal plugin's script in your Bootstrap project.

<script src="/path/to/jquery.min.js"></script> <script src="/path/to/bootstrap.min.js"></script> <script src="bootstrap.youtubemodal.js"></script>

2. Create normal links pointing to your Youtube Videos.

<a class="youtube" href="https://www.youtube.com/watch?v=oX6I6vs1EFs&t=196s">Morning Yoga</a>

3. You're also allowed to attach your Youtube videos to any DOM elements using 'rel' attribute as these:

<button class="youtube" rel="VIDEO-ID-HERE">Play</button> <img class="youtube" rel="VIDEO-ID-HERE" src="poster.jpg">

4. Initialize the plugin and done.

$(".youtube").YouTubeModal();

5. Config the modal & Youtube video player.

$(".youtube").YouTubeModal({ // video ID youtubeId: '', // modal title title: '', // use video's title useYouTubeTitle: true, // default ID attribute idAttribute: 'rel', // default CSS class cssClass: 'YouTubeModal', // width/height width: 640, height: 480, // autohide autohide: 2, // autoplay // 0 = disable autoplay: 1, // color color: 'red', // shows controls // 0 = disable controls: 1, // fullscreen button // 1 = enable fs: 1, // infinite loop // 1 = enable loop: 0, // show video information // 1 = enable showinfo: 0, // player theme theme: 'light' });

---

This awesome jQuery plugin is developed by 0x0soir. For more Advanced Usages, please check the demo page or visit the official website.