Simple Responsive Youtube Video Modal Plugin With jQuery - YU2FVL
File Size: | 32.2 KB |
---|---|
Views Total: | 14584 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
YU2FVL is a lightweight jQuery Plugin that plays any Youtube video in a responsive, fullscreen modal window while keeping the aspect ratio.
See also:
- jQuery Plugin To Embed youtube Video In modal Popup - ShowYtVideo
- youtube Video modal with jQuery and Bootstrap 3 - YTmodal
How to use it:
1. To get started, just include jQuery library and the jQuery YU2FVL plugin's files into the html document and we're ready to go.
<link href="src/jquery.yu2fvl.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="src/jquery.yu2fvl.js"></script>
2. Demo with youtube.com format.
<a class="play-1" href="https://www.youtube.com/watch?v=vpO8sZDxOGI">Play my video</a> <script> $(".play-1").yu2fvl(); </script>
3. Demo with youtu.be format.
<a class="play-2" href="https://youtu.be/vpO8sZDxOGI">Play my video</a> <script> $(".play-2").yu2fvl(); </script>
4. Demo with direct youtbe video id "vpO8sZDxOGI" and different aspect ratio 4:3
<button class="play-3">Play my video</button> <script> $(".play-3").yu2fvl({ vid: "vpO8sZDxOGI", ratio: 4/3 }); </script>
5. Demo with a big minimum padding on the edges. Why paddings ? well if you want to give a fixed size to your close button in css, you better want to always have a minimum of space.
<button class="play-4">Play my video</button> <script> $(".play-4").yu2fvl({ minPaddingY: 200, minPaddingX: 200, vid: "vpO8sZDxOGI", ratio: 21/9 }); </script>
6. All default options.
$(".el").yu2fvl({ minPaddingX: 50, minPaddingY: 50, ratio: 16/9, cssClass: "yu2fvl", overlayCssClass: "-overlay", iframeCssClass: "-iframe", closeCssClass: "-close", closeText: "X", vid: false });
Change log:
2018-02-27
- v0.1.2
2016-03-20
- changed the open option
2016-02-10
- moved callPlayer
This awesome jQuery plugin is developed by darkylmnx. For more Advanced Usages, please check the demo page or visit the official website.