Responsive-youtube.js

Simple script for use Youtube Iframe API in responsive web sites

Requirements

• IE10+
• Safari6+
• Google Chrome
• Firefox
• MutationObserver

Note¹: Use if (ResponsiveYoutube.supported)

Note²: Youtube API requires IE10+

HTML usage

<!-- embed video in page -->
<div data-ry-video="TALH8SsQJp4"></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>

Import:

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

...

ESM/ES6 import:

import ResponsiveYoutube from 'responsive-youtube.js';

...

RequireJS:

requirejs(['folder/foo/bar/responsive-youtube'], function (ResponsiveYoutube) {
    ...
});

Properties and functions

Name | description --- | --- ResponsiveYoutube.supported | Create players ResponsiveYoutube.start([setup]) | Create players ResponsiveYoutube.on(type, function) | Add global event ResponsiveYoutube.off(type, function) | Remove global event ResponsiveYoutube.destroy() | Destroy all players (use with Angular pagination, Ajax pagination, and Pjax)

Events

Name | equivalent to | callback format --- | --- | --- done | onYouTubeIframeAPIReady | function () {...} create | - | function (player) {...} ready | onReady | function (event, player) {...} state | onStateChange | function (event, player) {...} quality | onPlaybackQualityChange | function (event, player) {...} rate | onPlaybackRateChange | function (event, player) {...} error | onError | function (event, player) {...} api | onApiChange | function (event, player) {...}

More details in: https://developers.google.com/youtube/iframe_api_reference#Events

Example usage:

ResponsiveYoutube.start();

ResponsiveYoutube.on("done", function () {
    //API done...
});

ResponsiveYoutube.on("create", function (player) {
    //Something...
});

ResponsiveYoutube.on("state", function (event, player) {
    //Something...
});

Properties

Property | html5 | description --- | --- | --- autoplay | data-ry-autoplay | This parameter specifies whether the initial video will automatically start to play when the player loads. Supported values are 0 or 1. The default value is 0. cc_load_policy | data-ry-cc_load_policy | Setting the parameter's value to 1 causes closed captions to be shown by default, even if the user has turned captions off. The default behavior is based on user preference. color | data-ry-color | This parameter specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. controls | data-ry-controls | This parameter indicates whether the video player controls are displayed disablekb | data-ry-disablekb | Setting the parameter's value to 1 causes the player to not respond to keyboard controls. fs | data-ry-fs | Setting this parameter to 0 prevents the fullscreen button from displaying in the player. The default value is 1, which causes the fullscreen button to display. hl | data-ry-hl | Sets the player's interface language. iv_load_policy | data-ry-iv_load_policy | Setting the parameter's value to 1 causes video annotations to be shown by default, whereas setting to 3 causes video annotations to not be shown by default. The default value is 1. list | data-ry-list | The list parameter, in conjunction with the listType parameter, identifies the content that will load in the player. (no longer be supported as of 15 November 2020) listType | data-ry-listType | The listType parameter, in conjunction with the list parameter, identifies the content that will load in the player. Valid parameter values are playlist, search, and user_uploads (no longer be supported as of 15 November 2020) loop | data-ry-loop | In the case of a single video player, a setting of 1 causes the player to play the initial video again and again. modestbranding | data-ry-modestbranding | This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player. playlist | data-ry-playlist | This parameter specifies a comma-separated list of video IDs to play. If you specify a value, the first video that plays will be the VIDEO_ID specified in the URL path, and the videos specified in the playlist parameter will play thereafter. playsinline | data-ry-playsinline | This parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. rel | data-ry-rel | If the rel parameter is set to 0, related videos will come from the same channel as the video that was just played (changing on or after September 25, 2018) showinfo | data-ry-showinfo | Supported values are 0 and 1. start | data-ry-start | This parameter causes the player to begin playing the video at the given number of seconds from the start of the video. widget_referrer | data-ry-widget_referrer | This parameter identifies the URL where the player is embedded.

More parameters and details in: https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters

Set default properties in .start():

ResponsiveYoutube.start({
    rel: 0 //Remove related videos
});

Usage in html:

<!-- autoplay -->
<div data-ry-video="hFUQQIsPoVA" data-ry-autoplay="1"></div>

<!-- remove related -->
<div data-ry-video="hFUQQIsPoVA" data-ry-rel="1"></div>

<!-- without controls with closed caption -->
<div data-ry-video="hFUQQIsPoVA" data-ry-controls="0" data-ry-cc_load_policy="1"></div>

Youtube iframe embed with JSON-LD or microdata

Example with JSON-LD

<div data-ry-video="<youtube ID>"></div>

<script type="application/ld+json">{
    "@context": "http://schema.org",
    "@type": "VideoObject",
    "name": "Youtube iframe embed with JSON-LD",
    "description": "Youtube iframe embed with JSON-LD example",
    "thumbnailUrl": "https://i.ytimg.com/vi/<youtube ID>/default.jpg",
    "uploadDate": "2020-08-10T08:01:27Z",
    "duration": "PT15M43S",
    "embedUrl": "https://www.youtube.com/embed/<youtube ID>",
    "interactionCount": "464"
}</script>

Example with microdata

<div itemscope itemprop="video" itemtype="http://schema.org/VideoObject">
    <h2><span itemprop="name">Youtube iframe embed with microdata</span></h2>
    <meta itemprop="duration" content="PT15M43S">
    <meta itemprop="uploadDate" content="2020-08-10T08:01:27Z">
    <meta itemprop="thumbnailURL" content="https://i.ytimg.com/vi/<youtube ID>/default.jpg">
    <meta itemprop="interactionCount" content="464">
    <meta itemprop="embedURL" content="https://youtube.googleapis.com/v/<youtube ID>">
    <p itemprop="description">Youtube iframe embed with microdata example</p>
    <div data-ry-video="<youtube ID>"></div>
</div>

TODO

• [x] destroy players
• [ ] Create cover alternative to video