Play Youtube or Vimeo Videos On Popup – Modal Video Library

by Posted on

In this tutorial I am going to share awesome jQuery plugin which help you to add Youtube / Vimeo videos on popup modal. just few configuration your can simply add videos player on any HTML link when ever your visitor will click on that link a popup modal will open with video.

Plugin Features:

  • Not affected by dom structure.
  • Beautiful transition
  • Accessible for keyboard navigation and screen readers.
  • Rich options for youtube API and Vimeo API



Integrate Youtube or Vimeo Popup video player

Libraries

Include required plugins libraries along with latest jQuery Library.

<!--CSS-->
<link rel="stylesheet" href="modal-video.min.css">
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="modal-video.min.js"></script>

HTML

Create demos link for Vimeo and Youtube video player and set video id by data-video-id attribute.

<a href="#" class="vimeo-video-player" data-video-id='9515506'>Click to Open Vimeo Video Play</a>
<a href="#" class="youtube-video-player" data-video-id='JGwWNGJdvx8'>Click to Open Youtube Video Play</a>



JS

Finally enable youtube and Vimeo player modal on link click.

       <script>
            $(function() {  
		$(".vimeo-video-player").modalVideo({channel:'vimeo'});
		$(".youtube-video-player").modalVideo();
            });
	</script>

See live demos and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Published by admin