Demo with youtube.com format
https://youtu.be/JoJbQHCvyw0<a class="playvid play-1" href="https://youtu.be/JoJbQHCvyw0">Play my video</a>
Demo with youtu.be format
https://youtu.be/vpO8sZDxOGI<a class="playvid play-2" href="https://youtu.be/62e4GGctnvY">Play my video</a>
Demo with direct youtbe video id "vpO8sZDxOGI" and different aspect ratio 4:3
<button class="playvid play-3">Play my video</button>
<script>
$(document).ready(function() {
$(".play-3").ytResponsive({ vid: "TjBxhXlWm8g", 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="playvid play-4">Play my video</button>
<script>
$(document).ready(function() {
$(".play-4").ytResponsive({ minPaddingY: 200, minPaddingX: 200, vid: "HH0HGMphTKY", ratio: 21/9 });
});
</script>