Develop Reference

Multiple instances of YouTube player inside loop

I have the following code, which works - but the part I can't figure out is how to grab the index in the onReady event. The result is 2,2 instead of 0,1 which I would expect - why?
Codepen
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = [];
var playerEl = document.querySelectorAll('.ytplayer');
function onYouTubeIframeAPIReady() {
for (var i = 0; i < playerEl.length; i++) {
players[i] = new YT.Player(playerEl[i], {
events: {
'onReady': () => { console.log('index: '+i) } // why doesn't this return 0,1 ??
}
});
}
}
<iframe class="video ytplayer" width="100%" height="390" type="text/html" src="https://www.youtube.com/embed/ScMzIvxBSi4?controls=0&t=31s&loop=1&playlist=ScMzIvxBSi4&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<iframe class="video ytplayer" width="100%" height="390" type="text/html" src="https://www.youtube.com/embed/iGpuQ0ioPrM?controls=0&t=31s&loop=1&playlist=iGpuQ0ioPrM&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

I managed to solve it using the following code. The mistake I was making was I was trying to store a variable inside an event. The event is async and doesn't know that it's inside a loop - at least I think that's it, please correct me if I'm wrong.
Codepen working
function onYouTubeIframeAPIReady() {
document.querySelectorAll('.ytplayer').forEach((item) => {
new YT.Player(item, {
events: {
'onReady': (event) => {
event.target.playVideo();
event.target.mute();
}
}
})
})
}

jQuery tabs working on some but not all websites

I am attempting to create a tabbed form that will work across several websites. I have found that the code snippet works on some pages, and the tabs exist and function properly, but on one particular website the tabs do not display and I get the following console error: Uncaught TypeError: $(...).tabs is not a function. I have not had any luck debugging this myself or searching for answers online. Any help would be appreciated :)
Website I have issues with: http://www.jetstar.com/sg/en/home
Website it appears to work fine on: https://tigerair.com.au/
Note that the code snippet below assumes jQuery does exist on the website already. I have tried loading the latest version of jQuery first also with no luck.
if (typeof($) == 'undefined') {
var $ = jQuery;
}
function createInvisibleDiv() {
var invisiblePageSizedDiv = document.createElement("div");
invisiblePageSizedDiv.setAttribute("id", "pageDiv");
invisiblePageSizedDiv.setAttribute("class", "overlay");
document.body.appendChild(invisiblePageSizedDiv);
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.overlay{bottom:0; right:0; left: 0; top:0; overflow:hidden;background-color:rgba(88,88,90,0.8); z-index: 100; position:absolute;}';
document.body.appendChild(style);
document.body.style.position = "relative";
}
//this function creates the two tabs
function createUnorderedList(){
var $unorderedList = $("<ul></ul>");
$unorderedList.attr("id", "unorderedList");
$unorderedList.attr("class", "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all")
for (var i=1; i<3; ++i) {
var $linkItem = $("<li></li>");
$linkItem.append(createLink(i));
$linkItem.attr("class", "ui-state-default ui-corner-top")
$unorderedList.append($linkItem);
}
return $unorderedList;
}
function createLink(i){
var $link = $("<a></a>");
if (i==1) {
$link.attr({"href":'#foo', "title":"Foo"});
$link.text("Foo");
} else {
$link.attr({"href":'#bar', "title":"Bar"});
$link.text("Bar");
}
return $link;
}
function createFooForm() {
var $ele = $("<div></div>");
$ele.attr("id", "foo");
$ele.text("Thanks for looking at my code");
return $ele;
}
function createBarForm() {
var $ele = $("<div></div>");
$ele.attr("id", "bar");
$ele.text("I super appreciate it!");
return $ele;
}
function loadScript(url, callback)
{
// Adding the script tag to the head
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
var generateTabsFunction = function() {
createInvisibleDiv();
var $invisibleDiv = $('#pageDiv');
var $containerDiv = $("<div></div>");
$containerDiv.attr("id", "containerDiv");
$containerDiv.append(createUnorderedList());
$containerDiv.append(createFooForm());
$containerDiv.append(createBarForm());
$invisibleDiv.append($containerDiv);
$('body').append($containerDiv);
$( "#containerDiv" ).tabs();
}
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"
}).appendTo("head");
loadScript("https://code.jquery.com/ui/1.12.1/jquery-ui.js", generateTabsFunction);

Sounds like you have included JQuery, but forgot to include JQueryUI

Add/loop multiple videos, player names and events via YouTube API dynamically?

I'm trying to make an array of players to pass to new YT.Player. I keep getting 'player1' undefined, and the iFrame never gets added to the stated 'playerInfo.id'.
My code, without player2 or player3 included for simplicity:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var playerInfoList = [
{playerName: 'player1', id: 'container1', videoId: 'WPvGqX-TXP0', eventId: 'playerOneReady'},
{playerName: 'player2', id: 'container2', videoId: 'Yj0G5UdBJZw', eventId: 'playerTwoReady'},
{playerName: 'player3', id: 'container3', videoId: '9gTw2EDkaDQ', eventId: 'playerThreeReady'}];
var players = new Array();
function onYouTubeIframeAPIReady() {
if (typeof playerInfoList === 'undefined') return;
for (var i = 0; i < playerInfoList.length; i++) {
var generatePlayers = createPlayer(playerInfoList[i]);
players[i] = generatePlayers;
}
}
function createPlayer(playerInfo) {
playerInfo.playerName = new YT.Player(playerInfo.id, {
height: '390',
width: '640',
videoId: playerInfo.videoId,
events: {
'onReady': playerInfo.eventId
}
});
}
// When the Players are ready.
var duration1;
function playerOneReady() {
duration1 = player1.getDuration();
}
function play(playerNum) {
playerNum.seekTo(0);
playerNum.playVideo();
}
$('#player1-trigger').click(function(){
play(player1);
}
I'm not sure why it keeps coming back as undefined. I have a simpler structure that works fine, but it involves adding each player manually, and I'm trying to make it more dynamic/efficient. Although this is more efficient than dynamic.

from what i'm seeing you made a mistake in the function createPlayer. while you're trying to make a player with the name player1 you're actually saving the new YT.player on the location of playerInfo.playername. it would be better to save in te players list directly like this:
function onYouTubeIframeAPIReady() {
if (typeof playerInfoList === 'undefined') return;
for (var i = 0; i < playerInfoList.length; i++) {
var generatePlayers = createPlayer(playerInfoList[i],i);
}
}
function createPlayer(playerInfo, locationInList) {
players[locationInList] = new YT.Player(playerInfo.id, {
height: '390',
width: '640',
videoId: playerInfo.videoId,
events: {
'onReady': playerInfo.eventId
}
});
}
and then when calling for the players use:
$('#player1-trigger').click(function(){
play(players[1]);
}
For the future I would suggest when making code more efficient/dynamic/readable to make multiple smaller changes and to test after every change if the code still works. That way it's easier to find what has broken.

How to use an iframe as input for YT.Player

The docs say we should use a div container where the <iframe> element will be appended.
That works:
new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
But I should have an element <div id="player"></div> on the page.
Is it possible that if I already have the iframe element with the embedded video to use that iframe in the YT.Player constructor?
I would like to have something like this:
new YT.Player('iframeId').playVideo();
But the playVideo isn't there because the player is not loading (I guess that's happening because we are providing the iframe id).
Is there a way to connect an existing iframe with the YT.Player instance?

I wrote a quick hack for it: get the video id from the <iframe> url, replace the iframe with a div and initialize the player:
YTPlayerIframe = (function () {
function youtube_parser(url){
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
var match = url.match(regExp);
return (match&&match[7].length==11)? match[7] : false;
}
var __oldPlayer = YT.Player;
var player = function (id, options) {
var el = document.getElementById(id);
options.videoId = youtube_parser(el.getAttribute("src"))
el.outerHTML = "<div id='" + id + "'>test</div>";
return new __oldPlayer(id, options);
};
return player;
})();
Then you can use it this way:
var myPlayer = YTPlayerIframe("iframe-id", {
// The videoId option will be taken from the iframe src.
events: {
onReady: function () {...}
}
});

Using an array in Jquery

I'm not so experienced with Javascript and I have been struggling with this one pretty much all day.
I'm using Jquery to create and array of the ids of embedded youtube videos:
$(function() {
$('li').on("click",function(){
alert($(this).attr('data-pile'));
var pilename = $(this).attr('data-pile');
var videoIDs = [];
$("li[data-pile='"+pilename+"']").each(function(index){
videoIDs.push($(this).attr('id'));
});
$.each(videoIDs,function(){
});
});
});
And I need to use the array in this JS:
<script src="//www.youtube.com/iframe_api"></script>
<script>
/**
* Put your video IDs in this array
*/
var videoIDs = [
//my array of Ids here
];
var player, currentVideoId = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '350',
width: '425',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.loadVideoById(videoIDs[currentVideoId]);
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
currentVideoId++;
if (currentVideoId < videoIDs.length) {
player.loadVideoById(videoIDs[currentVideoId]);
}
}
}
</script>
In each div where embedded videos are I'm applying an id with same id as video.
How should I make the two scripts work?
I'll really appreciate if someone can point me in the right direction.

You're declaring your videoIDs array twice, once in your click events and again in your second
script.
The one inside your click events is local to that function whereas the other one is global. Javascript has function scope, so that click event one gets discarded once that function ends.
If you remove the one inside your click events, I believe it should work. You should also remove the $.each... as I don't think it's going to help (you're trying to make a playlist, right?).
It should be noted that it's considered bad practice to pollute the global namespace by using global variables. If this is all the code you have on your page, it's probably not an issue.

Try doing it this way: add a custom listener after "click" event. Didn't check your array forming section, tested with a custom array, hope you won't have issues with it.
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '350',
width: '425',
});
}
$(function(){
$(document.body).on("click",".play", function(){
player.stopVideo();
var pilename = $(this).attr('data-pile');
var videoIDs = [];
$("li[data-pile='"+pilename+"']").each(function(index){
videoIDs.push($(this).attr('id'));
});
if(videoIDs.length > 0){
currentVideoId = 0;
player.loadVideoById(videoIDs[0]);
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
currentVideoId++;
if (currentVideoId < videoIDs.length) {
player.loadVideoById(videoIDs[currentVideoId]);
}
}
}
player.addEventListener("onStateChange", onPlayerStateChange)
player.playVideo();
}
});
});
</script>