Responsive YouTube Player API with the responsive-youtube.js lib

#javascript #youtube

The need to create this library was when I tried to use
YouTube Embedded Players with width="100%":

<iframe width="100%" src="https://www.youtube.com/embed/<video ID>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

But the height does not match the proportion of the width.

Then I tried to use the YouTube Player API with width: '100%':

player = new YT.Player('<element ID>', {
    width: '100%',
    videoId: '<video ID>'
});

But I was also not able to make the player work well in responsive and adaptive layouts. However, I noticed that placing the player without specifying the width and height makes the player start with the size based on the approximate proportion of the original size of the video, with this information I decided to get the width and height using Element.clientWidth and Element.clientHeight from the original player and then applied a simple calculation in the following situations:

onReady (Youtube API)
onresize
setTimeout (300ms)

The simple calculation:

if (originalWidth != originalHeight) 
    element.height = currentWidth / (originalWidth / originalHeight);
} else 
    element.height = currentWidth;
}

Partially solved problem. However, there are systems that load specific things on "demand", such as paging using XMLHttpRequest with History API (like Vue.js, Angular, and the like), to solve this the best option looked like the MutationObserver API with { childList: true }.

So as more than one need arose to resolve this, I decided it would be better to turn it into a library and share it.

The library has 3,15KB (minified) and 1,55KB when gzipped from webserver (like ngx_http_gzip_module or mod_deflate).

Configure

You can download from releases responsive-youtube.min.js and put in your page:

<script src="responsive-youtube.min.js"></script>

Or use CDN:

<script src="https://cdn.jsdelivr.net/npm/responsive-youtube.js@0.2/responsive-youtube.min.js"></script>

Using npm:

npm i responsive-youtube.js

And import using:

const SimpleCopy = require('responsive-youtube.js');

Using ECMAScript modules:

import SimpleCopy from 'responsive-youtube.js'

Add player in your page

A simples example:

<!-- embed video in page -->
<div data-ry-video="Tdjk9dhT_AU"></div>

<!-- embed video in page without "responsive" -->
<div data-ry-video="5ABos9UTfJU" data-ry-ignore="true"></div>

<script src="responsive-youtube.js"></script>
<script>
ResponsiveYoutube.start();
</script>