Simple Responsive Youtube Video Modal Plugin With jQuery - YU2FVL

File Size: 32.2 KB
Views Total: 14609
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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="//"></script>
<script src="src/jquery.yu2fvl.js"></script>

2. Demo with format.

<a class="play-1" href="">Play my video</a>


3. Demo with format.

<a class="play-2" href="">Play my video</a>


4. Demo with direct youtbe video id "vpO8sZDxOGI" and different aspect ratio 4:3

<button class="play-3">Play my video</button>

    vid: "vpO8sZDxOGI", 
    ratio: 4/3 

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>

    minPaddingY: 200, 
    minPaddingX: 200, 
    vid: "vpO8sZDxOGI", 
    ratio: 21/9 

6. All default options.

  minPaddingX: 50,
  minPaddingY: 50,
  ratio: 16/9,
  cssClass: "yu2fvl",
  overlayCssClass: "-overlay",
  iframeCssClass: "-iframe",
  closeCssClass: "-close",
  closeText: "X",
  vid: false

Change log:


  • v0.1.2


  • changed the open option


  • moved callPlayer

This awesome jQuery plugin is developed by darkylmnx. For more Advanced Usages, please check the demo page or visit the official website.