DEV Community

loading...
Cover image for Responsive YouTube Player API with the responsive-youtube.js lib

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

brcontainer profile image Guilherme Nascimento ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>'
});
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Or use CDN:

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

Using npm:

npm i responsive-youtube.js
Enter fullscreen mode Exit fullscreen mode

And import using:

const SimpleCopy = require('responsive-youtube.js');
Enter fullscreen mode Exit fullscreen mode

Using ECMAScript modules:

import SimpleCopy from 'responsive-youtube.js'
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Examples

Browser support

Chrome Firefox Opera Edge Safari IE9+
6+ ✔ 10+ ✔

Discussion (0)

pic
Editor guide