Skip to content

brcontainer/responsive-youtube.js

Repository files navigation

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

  • destroy players
  • Create cover alternative to video