jQuery plugin to display YouTube PopUp, responsive & retina, Compatible with WordPress, Vimeo video support, Autoplay support, easy to use.
YouTube PopUp
YouTube PopUp is jQuery plugin to display YouTube or Vimeo in PopUp, compatible with WordPress, jQuery Plugin by Qassim Hassan – Owner of WP Time.
Features
- YouTube and Vimeo support.
- Easy to use.
- Video Autoplay and without Autoplay.
- Fully Responsive Style.
- Retina Ready.
- Easy CSS Customize.
Live Demo
This YouTube Popup with autoplay and this Without Autoplay.
This Vimeo Popup with autoplay and this Without Autoplay.
Download
Download jQuery plugin from Our Server or from GitHub.
Usage
Easy to use, include jQuery and YouTubePopUp plugin and Style:
<link rel="stylesheet" type="text/css" href="YouTubePopUp.css">
<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="YouTubePopUp.jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery("a.bla-1").YouTubePopUp();
jQuery("a.bla-2").YouTubePopUp( { autoplay: 0 } ); // Disable autoplay
});
</script>
Now add class to links, for example:
YouTube: <a class="bla-1" href="https://www.youtube.com/watch?v=L5s0ERQt8ek">With Autoplay</a> <a class="bla-2" href="https://www.youtube.com/watch?v=L5s0ERQt8ek">Without Autoplay</a> Vimeo: <a class="bla-1" href="https://vimeo.com/177871344">With Autoplay</a> <a class="bla-2" href="https://vimeo.com/177871344">Without Autoplay</a>
You can use video popup in image, just enter image inside link, for example:
<a href="youtube or vimeo video link here" class="bla-1"><img src="your image link here"></a>
Click on this image:
For WordPress use Video PopUp plugin.
5 Comments
Vedran
Hello Qassim,
I have a question about your popup video because it is not work in my website, and need help about that, can you help me, because I try everything, and I can not this tutorial to work on my site.
Best regards
And, your popup video tutorial is the best what I see on all web.
Qassim Hassan
Hello!
How can I help you?
Contact me: https://wp-time.com/contact/
Yousef
Hello Qasim,
How do i set the width and height of the pop up in percentage?
an it is possible to use more than one parameter in jQuery(“a.bla-2”).YouTubePopUp( { autoplay: 0 } );
Gavin
Hi mentioned you in this article
http://gojquery.com/jquery-popup-plugins/
Amra
Hi Qasim, is there an option to turn off the suggested video after finish?