Open And Play Youtube Videos In A Modal - jQuery GRT Youtube Popup
File Size: | 20.4 KB |
---|---|
Views Total: | 30192 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another jQuery Youtube popup plugin which allows you to place the YouTube video inside a responsive modal window with autoplay support.
How to use it:
1. Include the main style sheet for the Youtube popup.
<link rel="stylesheet" href="grt-youtube-popup.css">
2. Create a trigger element to toggle the Youtube popup. Don't forget to insert the video ID into the youtubeid
attribute as shown below:
<!-- inline element --> <span class="youtube-link" youtubeid="WZhJoRxWcLE">Open Video</span> <!-- a link --> <a href="#" class="youtube-link" youtubeid="-fac_iJ8Nw8">Open Video</a>
3. Include jQuery JavaScript library and the GRT Youtube Popup plugin's script at the bottom of the webpage.
<!-- Jquery --> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <!-- GRT Youtube Popup --> <script src="grt-youtube-popup.js"></script>
4. Call the main function grtyoutube
on the trigger element and done.
$(".youtube-link").grtyoutube();
5. Enable the 'autoplay' functionality on the Youtube videos.
$(".youtube-link").grtyoutube({ autoPlay:true });
6. The plugin also comes with 2 themes:
$(".youtube-link").grtyoutube({ theme: "dark" // or dark });
Changelog:
2019-04-03
- fixed autoplay with new browsers
This awesome jQuery plugin is developed by grt107. For more Advanced Usages, please check the demo page or visit the official website.