Develop Reference

Question about JavaScript scope and is it possible to accomplish what I am attempting to do

I am attempting to dynamically change the videoID of the YouTube API onclick. I have a list of items whose data src contains a YouTube URL. When a user clicks on a link, a modal pops up's playing that particular video. Once the video finishes, it redirects to another page.
If I hard code the ID, it works beautifully, but I cannot do that.
My only concern is I cannot get the videoID due to JavaScript scope. Is there anything you'd recommend I try?
$(document.body).on('click', ".video-btn", function (e) {
var $videoSrc = $(this).data("src");
console.log($videoSrc);
var **getVidID** = $videoSrc.substring(26);
console.log(getVidID);
});
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
playerVars: {
'controls': 0
},
width: 1920,
height: 1080,
videoId: **getVidID,** I'd like to use the videoID here
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
};
function onPlayerReady(event) {
event.target.playVideo();
};
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED && !done) {
alert('Taking you to Review Material Now..')
window.location.replace("http://www.google.com");
done = true;
}
};

Here's one way to do it:
var getVidID;
$(document.body).on('click', ".video-btn", function (e) {
var $videoSrc = $(this).data("src");
console.log($videoSrc);
getVidID = $videoSrc.substring(26);
console.log(getVidID);
});
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
console.log(getVidID);
player = new YT.Player('player', {
playerVars: {
'controls': 0
},
width: 1920,
height: 1080,
videoId: **getVidID,** I'd like to use the videoID here
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
};
Be aware: getVidID may not have a value, depending on where/when you call onYouTubeIframeAPIReady(). The click event function must run before it gets the id. So, you may want to validate that it has a value before you use it in that other function. Also, be aware that the value of that variable only changes when the click event fires...

How to add a youtube external unmute sound

I am trying to put a button for unmute sound but having trouble executing it. My original plan was to do a toggle sound but I am looking to make the sound on work first
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '600',
width: '100%',
playerVars: { 'autoplay': 1, 'controls': 0,'autohide':1,'wmode':'opaque' },
videoId: 'W83b4HoPdFo',
events: {
'onReady': onPlayerReady}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
}
$('#mutevideo').on('click', function(){
player.unmute();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="player"></div>
Sound On

You can use,
player.unMute();
instead of
player.unmute();

Youtube player iframe API in web extension

I'm making a youtube web extension. How can I get a reference to YT.Player from the content script on a youtube video page (www.youtube.com/watch?v=videoId)?
In my main content script I have this (from https://developers.google.com/youtube/iframe_api_reference), but the function onYouTubeIframeAPIReady never fires:
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 player;
function onYouTubeIframeAPIReady() {
console.log("onYouTubeIframeAPIReady");
////normally I would create the player like below, but I need the existing one
//player = new YT.Player('player', {
// modestbranding: 1,
// cc_load_policy: 1,
// wmode: "opaque",
// height: '390',
// width: '640',
// videoId: videoId,
// enablejsapi: 1,
// events: {
// 'onReady': onPlayerReady,
// 'onStateChange': onPlayerStateChange,
// 'onApiChange': onApiChange
// }
//});
}
Interestingly, I can get the player from the browser console:
var player = $("#movie_player");
But this call doesn't work from the content script (I get a different kind of object).

In Youtube player, see the frame when it's paused

I'm doing an application that uses youtube API. I select the time with the "seekto" function, but when the video jumps to that time, it appears like the following screenshot:
There's any option to remove all this things (bar, load circle, ...), and only see the frame of the video in that time??
Code:
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 player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
playerVars: { 'autoplay': 0, 'controls': 2 },
height: '390',
width: '640',
videoId: '1WcvD6lu2Yg',
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
event.target.pauseVideo();
}
function salta(sec) {
player.seekTo(sec, true);
}
Thank you!
Edited:
Solved, the problem was the parameter "false" of the function seekTo. In "true" position, it loads the following second correctly.

How do you mute an embedded Youtube player?

I'm experimenting with the Youtube player but I can't get it to mute by default.
function onPlayerReady() {
player.playVideo();
// Mute?!
player.mute();
player.setVolume(0);
}
How do I mute it from the start?
Fiddle
Update:
JavaScript Player API is deprecated.
Use iframe Embeds instead.

Turns out player.mute() works fine. It only needed the parameter enablejsapi=1. Initial test in the fiddle didn't work because the player initiation had an error. The following works.
HTML:
<iframe id="ytplayer" type="text/html" src="https://www.youtube-nocookie.com/embed/zJ7hUvU-d2Q?rel=0&enablejsapi=1&autoplay=1&controls=0&showinfo=0&loop=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>
JS:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.mute();
player.playVideo();
}
Fiddle
Credit to Gagandeep Singh and Anton King for pointing to enablejsapi=1

All above answers didn't work for me for some reason. It might be weird wordpress theme that I had to use or depreciated methods at Youtube API, I'm not sure. The only way of muting the player was to insert the code below into tag.
// Loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replaces the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'YOUR_VIDEO_ID',
playerVars: {
autoplay: 1,
controls: 1,
disablekb: 1,
hl: 'ru-ru',
loop: 1,
modestbranding: 1,
showinfo: 0,
autohide: 1,
color: 'white',
iv_load_policy: 3,
theme: 'light',
rel: 0
},
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event){
player.mute();
}
<div id="ytplayer"></div>

It's important to note that YouTube API mandates you run this within your markup directly within a <script> tag, or via a standard document.onLoad() native listener and not as a named function.
Otherwise it will not natively bind the onYouTubeIframeAPIReady() function to the DOM.

Try below code
var youtubeplayer = iframe.getElementById('ytplayer');
youtubeplayer .setVolume(0);
And below is your fiddle updated version,
NOTE: Must include enablejsapi=1 in video url
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
player.playVideo();
// Mute?!
//player.mute(); instead of this use below
event.target.mute();
//player.setVolume(0);
}
DEMO
Hope this helps...