Play Youtube or Vimeo Videos On Popup – Modal Video Library

509

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

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

Social Media Auto Publish Powered By : XYZScripts.com