Demo with youtube.com format
<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.
<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>