Responsive-youtube.js NPM

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

youtube embed responsive player

@everything-registry/sub-chunk-2658 @zalastax/nolb-resp @infinitebrahmanuniverse/nolb-resp

0.2.1

3 years ago

0.2.0

3 years ago

0.1.7

5 years ago