Play Youtube or Vimeo Videos On Popup – Modal Video Library
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.