Open And Play Youtube Videos In A Modal - jQuery GRT Youtube Popup

File Size: 20.4 KB
Views Total: 29973
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Open And Play Youtube Videos In A Modal - jQuery GRT Youtube Popup

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.