Develop Reference

Generate new iframe YouTube player for multiple instances on a page

The following JavaScript works great when I have only one instance of a YouTube video on a page:
function createVideo(playerElement, videoID, autoplay=false) {
const youtubeScriptId = 'youtube-api';
const youtubeScript = document.getElementById(youtubeScriptId);
if (youtubeScript === null) {
const tag = document.createElement('script');
const firstScript = document.getElementsByTagName('script')[0];
tag.src = 'https://www.youtube.com/iframe_api';
tag.id = youtubeScriptId;
firstScript.parentNode.insertBefore(tag, firstScript);
}
window.onYouTubeIframeAPIReady = function() {
return new window.YT.Player(playerElement, {
videoId: videoID,
playerVars: {
autoplay: autoplay,
modestbranding: 1,
rel: 0
}
});
}
}
But when I try to call this again, the video doesn't load. Only the first video. This method is called via a click event after the page has loaded, and I pass in a videoID data attribute and build my new YouTube video to show on the page.
I assume because my JavaScript is creating only one instance on the window object, and not separate multiple instances. After further research I can see that the onYouTubeIframeAPIReady() method only fires once on a page, so that explains why the subsequent calls when the click event fires this method fails. Since it is impossible for me to know how many exact instances to load on a page, how would I refactor this code to make it dynamic, so that unlimited instances can be created and played on a page via click events only? I've seen countless tutorials of building YouTube videos when you know the elements on a page. But in this scenario either I do not know what is on the DOM, or want to slow the site down on page load by building unlimited YT videos to be inserted into the DOM only to probably not be clicked to play by the user.
Is it even possible to dynamically create a new YouTube video on a page using their YT API bound to a click event? From what I am reading online, it looks like a person has to load all videos at once when onYouTubeIframeAPIReady() is first loaded on the page after the YT API loads, and I have to add extra logic in place to play/stop each and then bind additional click events per each video to show/hide/play/stop. This is going to increase my page load dramatically, and add a bunch of JS overhang to my page. I simply want to create a new video on a click event.

I hope you're not using the same videoID every time, because for multiple instances of anything you need to have some kind of sequential ID management, like this...
var ID=[], Vid;
for(var i=0; i<20; i++){ // create 20 video players
ID.push('V'+i);
Vid=document.createElement('video');
Vid.id=ID[i];
document.body.appendChild(Vid);
createVideo(e, ID[i], false); // Your function
}
You get the drift...

The core issue that you're experiencing is the YT.Player can only be initalized once on the page - and if you have multiple videos to be handled via the YT.Player you'd have to iterate over the videos one by one with the same YT.Player instance. It's a little weird at first, but can work - especially if you need to handle the videos via popup modals, etc.
Here's an example that I've used to iterate over a page that has multiple hidden modals with videos, and then handle the click events and playing the videos:
jQuery(document).ready(function ($) {
let modalTriggerElements = $('.video_play_icon'),
playerInfoList = [],
players = []
if (typeof (YT) == 'undefined' || typeof (YT.Player) == 'undefined') {
let tag = document.createElement('script'),
firstScript = document.getElementsByTagName('script')[0]
tag.src = 'https://www.youtube.com/iframe_api';
tag.id = 'youtube-api';
firstScript.parentNode.insertBefore(tag, firstScript)
}
if (modalTriggerElements.length > 0) {
$.each(modalTriggerElements, (index, element) => {
buildPlayersList(element)
modalTriggerClickEvent(element)
})
}
window.onYouTubePlayerAPIReady = function () {
if (typeof playerInfoList === 'undefined') return;
for (let i = 0; i < playerInfoList.length; i++) {
players[i] = createPlayer(playerInfoList[i]);
}
}
function createPlayer(playerInfo) {
return new YT.Player(playerInfo.playerId, {
videoId: playerInfo.videoId,
playerVars: {
showinfo: 0,
}
});
}
function buildPlayersList(element) {
let $modelDiv = $(element).closest('.hc_module').next('.video_model'),
$playerDiv = $($modelDiv).find('#video-player');
playerInfoList.push({
'videoId': $($modelDiv).data('video-id'),
'playerId': $($playerDiv)[0],
});
}
function modalTriggerClickEvent(element) {
$(element).on('click', () => {
let $parentDiv = $(element).closest('.hc_module'),
$nearestVideoDiv = $parentDiv.next('.video_model'),
$closeDiv = $nearestVideoDiv.find('.close_modal')
$nearestVideoDiv.css('display', 'block')
$nearestVideoDiv.attr('aria-hidden', 'false')
$closeDiv.on('click', () => {
$nearestVideoDiv.css('display', 'none')
$nearestVideoDiv.attr('aria-hidden', 'true')
players.forEach((el) => {
el.stopVideo();
});
})
})
}
});

When you don't know how many players you can use random numbers to avoid conflicts...
var ID=[]; // Global array
function AddVideoPlayer(){
var Vid, i=ID.length-1;
ID.push('V'+RandomNumber(99999999));
Vid=document.createElement('video');
Vid.id=ID[i];
document.body.appendChild(Vid);
createVideo(e, ID[i], false); // Your function
}

Youtube iframe API events not triggering when player is added at later stage

I have an app where I inject a youtube iframe player (full iframe html snippet) at some point in time when a user requests a specific video. This could happen e.g. 30 seconds after loading the app or at any point in time, just not right after loading the app.
This seems to be a problem for the youtube API. In my code example below, you can see that the example isn't working because I'm adding the iframe player after a 1 second time. When you lower the timeout from 1000 to just 1ms, the code works fine.
Because of that test, I found out that the YT events aren't triggering because of my player being injected at a later point when the app has already been loaded for some time.
Is there a way to make the events trigger when the player isn't immediately added to the dom? Or can someone explain why the events only work when the player is added immediately to the page (even when the element itself is added after the script)
https://jsbin.com/vuhibelabi/1/edit?html,output
<div id="test" style="display:none;"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.id = 'iframe-demo';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('existing-iframe-example', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00';
}
function changeBorderColor(playerStatus) {
var color;
if (playerStatus == -1) {
color = "#37474F"; // unstarted = gray
} else if (playerStatus == 0) {
color = "#FFFF00"; // ended = yellow
} else if (playerStatus == 1) {
color = "#33691E"; // playing = green
} else if (playerStatus == 2) {
color = "#DD2C00"; // paused = red
} else if (playerStatus == 3) {
color = "#AA00FF"; // buffering = purple
} else if (playerStatus == 5) {
color = "#FF6DOO"; // video cued = orange
}
if (color) {
document.getElementById('existing-iframe-example').style.borderColor = color;
}
}
function onPlayerStateChange(event) {
changeBorderColor(event.data);
}
function go(){
var player = `<iframe id="existing-iframe-example"
width="640" height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
frameborder="0"
style="border: solid 4px #37474F"
></iframe>`;
document.querySelector("#test").innerHTML = player;
document.querySelector("#test").style.display = "block";
}
setTimeout(function(){
go();
}, 1000)
</script>

For anyone in the same situation, I have switched to using the JS-based solution instead of injecting a full iframe and that seems to work fine.

YouTube API - Dynamically add event listeners

I'm using the Youtube API to restyle embedded videos which are dynamically added to the page.
I'm having trouble figuring out how to set up the custom controls. Each video embed has a custom control which needs to fire the playVideo() function on the relevant embed.
When each player is initialised it fires the onPlayerReady function. My problem is I don't know how to bind a click event to the new players custom button which will fire the playVideo() function for the correct player.
I've done a lot of searching on here and can't find reference to working with multiple embeds.
FINAL UPDATE
As jQuery is available, i'm using it in this solution...
function onPlayerReady(event) {
// bind events
var playButton = $(event.target.c).parent().find('.immersive-video__play');
playButton.on('click', function() {
event.target.playVideo();
});
}
UPDATE
This is my current working solution...
var buttonCount = 0;
function onPlayerReady(event) {
// bind events
var playButtons = document.getElementsByClassName("immersive-video__play");
playButtons[buttonCount].addEventListener('click', function() {
event.target.playVideo();
});
buttonCount++;
}
ORIGINAL
function onPlayerReady(event) {
// bind event
var playButtons = document.getElementsByClassName("immersive-video__play");
// I don't know how to link the button to the player?
playButtons[].addEventListener('click', function() {
player[].playVideo();
});
}
var player = [];
function checkYT() {
var check = setInterval(function() {
if (typeof YT !== 'undefined' && typeof YT.Player !== 'undefined') {
var tar = document.getElementsByClassName('immersive-video__embed');
for (var i = 0; i < tar.length; i++) {
var id = tar[i].dataset.video;
var container = document.getElementsByClassName('video-holder');
player[i] = new YT.Player(container[i], {
videoId: id,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
clearInterval(check);
return;
} else {
console.log('not ready');
}
}, 20);
}

Make sure that the iframe src URL has ?enablejsapi=1 at the end like this:
<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video"></iframe>
Setting the parameter's value to 1 enables the player to be controlled via IFrame or JavaScript Player API calls. The default value is 0, which means that the player cannot be controlled using those APIs.
Check your Player object which has the ability to control that video. Create it using the id attribute on that iframe. Here is an example from this tutorial:
var player;
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
player = new YT.Player('video', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady
}
});
}
Then check the "player ready" callback and bind events. It will automatically be passed the event object, in which event.target is the player.
function onPlayerReady(event) {
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
}
Hope this helps!

Autoplay within HTML

I am new to Javascript... like super new :X and i am writing my very first script to try and automate video episodes of my favorite anime because the videos on the site don't have a autoplay feature after you click the link. I read about Video and Var = 'My video' to try and figure out how to tell the script, when page loads video .autoplay = true...but i just get to dead ends. here is where i am at:
var urlsToLoad = [
'http://Site1/Ep1',
'http://Site1/Ep2',
'http://Site1/Ep3',
'http://Site1/Ep4'
];
if (document.readyState == "complete") {
FireTimer ();
}
window.addEventListener ("hashchange", FireTimer, false);
function FireTimer () {
setTimeout (GotoNextURL, 5000); // 5000 == 5 seconds
}
function GotoNextURL () {
var numUrls = urlsToLoad.length;
var urlIdx = urlsToLoad.indexOf (location.href);
urlIdx++;
if (urlIdx >= numUrls) urlIdx = 0;
Once the first video link starts 'Site1/EP1', i have this going:
function myFunction() {
var vid = document.getElementById("925664"); <--Ctrl+F 'Videoid' from Source
vid.autoplay = true;
vid.load();
}
but it just stays died like 'click play to start' ..
I can really use help here PLZZZ and thank you.

Something like this:
<!-- HTML Page -->
<video id="925664"></video>
// Javascript
function myFunction() {
var vid = document.getElementById("925664"); // <--Ctrl+F 'Videoid' from Source
vid.src = "path/to/file.mp4";
//vid.autoplay = true; // not really anything that's useful
vid.load();
vid.play();
}
Warning: Most mobile devices don't allow media files to play via code and require human interaction (click/touch) in order to start playback. However, on desktops this isn't a problem.

Try using the play() method instead.
function myFunction() {
var vid = document.getElementById("925664");
vid.play();
}

loading multiple video players with youtube api

I need to load more than one video with youtube's API. This is my first time using it so I'm not sure what I'm doing wrong, but this is what I'm trying:
var player;
var player2;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
videoId: 'hdy78ehsjdi'
});
player2 = new YT.Player('player', {
videoId: '81hdjskilct'
});
}

Since onYouTubeIframeAPIReady function is supposed to called only once the following approach could be used:
initialize and save video player information
(ControlId,width,height,VideoId) in array
call onYouTubeIframeAPIReady function to create all the video
players
Example
var playerInfoList = [{id:'player',height:'390',width:'640',videoId:'M7lc1UVf-VE'},{id:'player1',height:'390',width:'640',videoId:'M7lc1UVf-VE'}];
function onYouTubeIframeAPIReady() {
if(typeof playerInfoList === 'undefined')
return;
for(var i = 0; i < playerInfoList.length;i++) {
var curplayer = createPlayer(playerInfoList[i]);
}
}
function createPlayer(playerInfo) {
return new YT.Player(playerInfo.id, {
height: playerInfo.height,
width: playerInfo.width,
videoId: playerInfo.videoId
});
}

The first parameter of new YT.Player needs to be the id of the HTML element (f.e. a DIV) to be replaced with an iframe to the video.
As you use 'player' for both of these objects, you will load both into the same element.
<div id="ytplayer1"></div>
<div id="ytplayer2"></div>
<script>
var player;
var player2;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer1', {
height: '390',
width: '640',
videoId: 'hdy78ehsjdi'
});
player2 = new YT.Player('ytplayer2', {
height: '390',
width: '640',
videoId: '81hdjskilct'
});
}
</script>
Parameters of the functions are described in the Youtube API documentation: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player (EDIT: changed to the right link)

The HTML
<div data-id="youtubevideoidhere" class="video"></div>
<div data-id="youtubevideoidhere" class="video"></div>
<div data-id="youtubevideoidhere" class="video"></div>
The JS for Videos
// CREATE VIDEOS "CLASS" to handler videos
var Videos = (function() {
// VARIABLES
var $ = jQuery, // The jquery
players = [], // players array (to coltrol players individually)
queue = []; // videos queue (once api is ready, transform this into YT player)
// Constructor
function Videos() {}
// METHODS
// Add elements to queue
Videos.prototype.add = function($video) {
queue.push($video);
};
// Load YT API
Videos.prototype.loadApi = function() {
// jQuery get script
$.getScript("//www.youtube.com/iframe_api", function() {
// once loaded, create the onYouTubeIframeAPIReady function
window.onYouTubeIframeAPIReady = function() {
queue.forEach(function($video) {
// Create the YT player
var player = new YT.Player($video.get(0), {
'width': "100%",
'height': "100%",
'videoId': $video.data("id")
});
// add to players array
players.push(player);
});
};
});
};
return Videos;
})();
And then, create videos like this
var videos = new Videos();
$('.video').each( function () {
videos.add( $(this) );
})
videos.loadApi();

I had a more expansive issue that boiled down to this same problem. The requirements I had were to write a JS class to manage one or more (the number can vary from 1 to infinity) video embeds. The backend system is ExpressionEngine (but that's irrelevant here). The primary goal was to set up a framework for analytics that pushes individual data to our Adobe Analytics platform. Shown here is merely the part that gives play count, it can be expanded a lot from here.
The CMS allows editors to create modules on the page that present a video. One video per module. Each module is basically a section of HTML arranged via Bootstrap 3 (irrelevant for this answer).
The relevant HTML looks like this:
<div id="js_youTubeContainer_{innov_mod_ytplayer:id}" class="embed-responsive embed-responsive-16by9">
<div id="js_youTubeFrame_{innov_mod_ytplayer:id}" class="embed-responsive-item"></div>
</div>
The part that says "{innov_mod_ytplayer:id}" is the YouTube Video ID from our CMS. This allows for a unique ID for each embeded item. This is important later.
Below this, I then render out:
var innovYouTube_{innov_mod_ytplayer:id} = new Ariba.Innovations.YouTube.Class({
'innovYouTubeVideoId': '{innov_mod_ytplayer:id}',
'innovYouTubeVideoTitle': '{innov_mod_ytplayer:title}',
'innovYouTubeDivId' : 'js_youTubeFrame_{innov_mod_ytplayer:id}'
});
innovYouTube_{innov_mod_ytplayer:id}.Init(); // And... Go!
var onYouTubeIframeAPIReady = (function() {
try{ //wrap this in try/catch because it actually throws errors when it runs subsequent times - this is expected as it's related to YouTube "rerunning" the function on other videos.
innovYouTube_{innov_mod_ytplayer:id}.config.functionCache = onYouTubeIframeAPIReady; //cache the existing global function
return function() {
try{
innovYouTube_{innov_mod_ytplayer:id}.onYouTubeIframeAPIReady(); //execute this instance's function
var newOnYouTubeIframeAPIReady = innovYouTube_{innov_mod_ytplayer:id}.config.functionCache.apply(this, arguments); //add instances to global function
return newOnYouTubeIframeAPIReady; //update global function
}catch(err){}
};
}catch(err){}
})();
You'll see some ExpressionEngine template tags here too - those are just the Video ID and the Video Title from YouTube. To replicate this, you'll need to change those of course.
What this does is allow me to dynamically update the single global callback with new code for each newly embedded video. In the end, this callback will contain calls to their own instances of my class. You need those try/catch blocks because it throws a false-positive error for all the "other" embeds except the one it's actually executing "right now" - remember this script runs once for every embed on the page. The errors are expected and actually cause no problem, so the try/catch suppresses them.
Using the CMS template tag, I create each instance based on the YouTube video ID. I would run into a problem if someone added the same video module more than once, but that's a business problem easily handled since that's not supposed to happen. This allows me to instantiate unique instances of my class over and over for each video.
The critical part of that script is based on this extremely helpful SO answer: Adding code to a javascript function programmatically
Here's the actual class. It's commented mostly... We use jQuery, so you'll see one important use of it here in the $.extend() method. I use that as a convenience in the class constructor method, but you could do that with vanilla JS too (JavaScript equivalent of jQuery's extend method) I just find the jQuery easier to read, and since it's available to me, I use it.
if (typeof Ariba === "undefined") { var Ariba = {}; }
if (typeof Ariba.Innovations === "undefined") { Ariba.Innovations = {}; }
if (typeof Ariba.Innovations.YouTube === "undefined") { Ariba.Innovations.YouTube = {}; }
if (typeof Ariba.Innovations.YouTube.Class === "undefined") {//this script may be embedded more than once - do this to avoid re-processing it on subsequent loads
Ariba.Innovations.YouTube.Class = function (config) {
this.static = {
'ytScriptId': 'js_youtubeFrameAPI',
'ytScriptUrl': 'https://www.youtube.com/iframe_api'
};//static configuration. Will overwrite any other settings with the same name
this.config = {//optional configuration variables. Will be overridden by instance or static settings with the same name.
'adobeAnalyticsFired': false
};
this.config = $.extend(true, this.config, config);//inserts (destructively!) the instance settings.
this.config = $.extend(true, this.config, this.static);//inserts (destructively!) the static settings.
this.config.this = this;
};
Ariba.Innovations.YouTube.Class.prototype.Init = function () {
//Note: have to allow it to write it over an over because calling the API script is what makes YouTube call onYouTubeIframeAPIReady.
//if (document.getElementById('js_youtubeFrameAPI') === null) { // don't add the script again if it already exists!
this.config.apiScript = document.createElement('script');
this.config.apiScript.src = 'https://www.youtube.com/iframe_api';
this.config.apiScript.id = 'js_youtubeFrameAPI' + this.config.innovYouTubeVideoId;
this.config.firstScriptTag = document.getElementsByTagName('script')[0];
this.config.firstScriptTag.parentNode.insertBefore(this.config.apiScript, this.config.firstScriptTag);
//}
//else { console.log("iframe script already embedded", this.config.innovYouTubeVideoId); }
}
Ariba.Innovations.YouTube.Class.prototype.onYouTubeIframeAPIReady = function (event) {
//console.log("onYouTubeIframeAPIReady", this.config.innovYouTubeVideoId, arguments);
var _this = this;
//console.log(this);
this.config.ytPlayer = new YT.Player(this.config.innovYouTubeDivId, {
videoId: this.config.innovYouTubeVideoId,
events: {
'onReady': _this.onPlayerReady.bind(_this),
'onStateChange': _this.onPlayerStateChange.bind(_this)
}
});
}
Ariba.Innovations.YouTube.Class.prototype.onPlayerReady = function (event) {
//console.log("onPlayerReady", this.config.innovYouTubeVideoId, event);
}
Ariba.Innovations.YouTube.Class.prototype.onPlayerStateChange = function (event) {
//console.log("onPlayerStateChange", this.config.innovYouTubeVideoId, event, this);
if (event.data === YT.PlayerState.PLAYING && !this.config.adobeAnalyticsFired) {
//console.log("YouTube Video is PLAYING!!", this.config.innovYouTubeVideoId);
this.config.adobeAnalyticsFired = true;
if (typeof _satellite !== "undefined") {
window._satellite.data.customVars.adhoc_tracker_val = "Innovations Video: " + this.config.innovYouTubeVideoTitle + " (" + this.config.innovYouTubeVideoId + ")";
_satellite.track('adhoctrack');
}
}
}
}
A few other notes:
Keeping scope in the class instance is easy once you get the main global callback problem solved. You just have to add .bind(). For example:
'onReady': _this.onPlayerReady.bind(_this)
You might also see:
var _this = this;
This is so the "this" scope for the instance isn't lost accidentally. Maybe not necessary, but it's a convention I've adopted over the years.
Anyway, I've been working on this for a week now, and figured I'd share it with the SO community since it's clear from my looking for answers a lot of others have been searching for solutions to this too.

I needed this same thing in React. Expanding upon Vadim's answer you could do something like the following and add them to an object then create the player if you don't know what the array of players will look like prior.
const YoutubeAPILoader = {
_queue: [],
_isLoaded: false,
load: function (component) {
// if the API is loaded just create the player
if (this._isLoaded) {
component._createPlayer()
} else {
this._queue.push(component)
// load the Youtube API if this was the first component added
if (this._queue.length === 1) {
this._loadAPI()
}
}
},
_loadAPI: function () {
// load the api however you like
loadAPI('//youtube.com/player_api')
window.onYouTubeIframeAPIReady = () => {
this._isLoaded = true
for (let i = this._queue.length; i--;) {
this._queue[i]._createPlayer()
}
this._queue = []
}
}
}

what i have done to load multiples videos was destroy the iframe when i click outside the video (you could use the event you want) then i created the div again so you can reuse the div with another video ID

<iframe title="YouTube video player" src="https:YOUR CHANNEL Full Link" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

As an addendum to Vadim's answer, the following worked for me with events:
const iframes = [{id: 'hello'},...];
const inOnReadyScope = "I can be accessed by onPlayerReady"
function onYouTubeIframeAPIReady() {
for (let i = 0; i < iframes.length; i++) {
const player = new YT.Player(iframe.id, {
events {
onReady: onPlayerReady
}
}
function onPlayerReady(event){
event.target.setVolume(0);
console.log(inOnReadyScope)
// use anything on event
}
}
}

<script type="text/javascript">
$(document).ready(function () {
$(".youtube-player").each(function () {
var playerid = $(this).attr("id");
setTimeout(function () {
onYouTubeIframeAPIReady2(playerid);
}, 2000);
});
});
function onYouTubeIframeAPIReady2(PlayerID) {
var ctrlq = document.getElementById(PlayerID);
console.log(ctrlq);
var player = new YT.Player(PlayerID, {
height: ctrlq.dataset.height,
width: ctrlq.dataset.width,
events: {
'onReady': function (e) {
e.target.cueVideoById({
videoId: ctrlq.dataset.video,
startSeconds: ctrlq.dataset.startseconds,
endSeconds: ctrlq.dataset.endseconds
});
}
}
});
}
</script>