jQuery Youtube Url To FullScreen Video Lightbox

Demo with youtube.com format

Play my video

    
    <a class="play-1" href="https://youtu.be/S-sJp1FfG7Q?t=136">Play my video</a>

    <script>
      $(".play-1").yu2fvl();
    </script>
    
  

Demo with youtu.be format

Play my video https://youtu.be/AbTUw7aTITg

    
    <a class="play-2" href="https://youtu.be/AbTUw7aTITg">Play my video</a> https://youtu.be/AbTUw7aTITg

    <script>
      $(".play-2").yu2fvl();
    </script>
    
  

Demo with direct youtbe video id "AbTUw7aTITg", start time (seconds) and different aspect ratio 4:3

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

    <script>
      $(".play-3").yu2fvl({ vid: "AbTUw7aTITg", t: 40, ratio: 4/3 });
    </script>
    
  

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: "AbTUw7aTITg", ratio: 21/9 });
    </script>
    
  

Lightbox called directly from JavaScript on page load.

Try it on this page

    
    <button class="play-5">Click to re-open</button>

    <script>
      // with a button to re-open it later
      $('.play-5').yu2fvl({ open: true });

      // just to open once, no element linked to it
      // if you open it directly with no element linked to it
      // the "vid" parameter is required
      $.yu2fvl({ vid: "AbTUw7aTITg", open: true });
    </script>