Autoplay Youtube Videos In Bootstrap Modal - jQuery YoutubeModal
File Size: | 4.39 KB |
---|---|
Views Total: | 7212 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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