Responsive YouTube Player API with the responsive-youtube.js lib
Tags: javascript, youtube
Published: 2021-02-04 03:22:16

The need to create this library was when I tried to use 
[YouTube Embedded Players](https://developers.google.com/youtube/iframe_api_reference) with `width="100%"`:

```html
<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](https://developers.google.com/youtube/iframe_api_reference) with `width: '100%'`:

``` javascript
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:

```javascript
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`](http://nginx.org/en/docs/http/ngx_http_gzip_module.html) or [`mod_deflate`](https://httpd.apache.org/docs/2.4/mod/mod_deflate.html)).


# Configure

You can download from releases [responsive-youtube.min.js](https://github.com/brcontainer/responsive-youtube.js/blob/0.2.1/responsive-youtube.min.js) and put in your page:

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

Or use CDN:

```html
<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:

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

Using ECMAScript modules:

```javascript
import SimpleCopy from 'responsive-youtube.js'
```

# Add player in your page

A simples example:

```html
<!-- 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>
```

## Examples

- [simple.html](https://brcontainer.github.io/responsive-youtube.js/examples/simple.html)
- [dynamic.html](https://brcontainer.github.io/responsive-youtube.js/examples/dynamic.html)

## Browser support

![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![IE9+](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png)
--- | --- | --- | --- | --- | ---
✔ | ✔ | ✔ | ✔ | 6+ ✔ | 10+ ✔