Simple Responsive Youtube Video Modal Plugin With jQuery - YU2FVL

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.