We Keep Coding

How can I load external video to YouTube embedded player?

I want to load external video on YouTube embedded player. I tried:
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', {
height: '360',
width: '640',
playerVars: {
'playsinline': 1
},
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
player.loadVideoByUrl("https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4");
}
But it says "An error occurred. Please try again later."
Where am I doing wrong?

i doubt u can play any non-youtube video inside the youtubes iframe-api.

How do I get the YouTube API to load onclick?

I am using the YouTube Iframe as shown below. I want to make my player load on the click of a button instead as soon as the API loads.
I have created a system where a user of my website will be able to choose what videos will be loaded into the playlist, so I cannot hardcode the YouTube video IDs. Is it possible to make an onclick function that fires an event that loads the player? If so, how??
Thanks so much!!!
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: { //CAN I REPLACE THE ONREADY EVENT WITH ONE
'onReady': onPlayerReady, //THAT FIRES ONCLICK?
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}

You can do something like code below
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 video_id = '' //Desired video ID
var player;
$('LOAD_BUTTON').on('click', function() {
// Load player when LOAD_BUTTON is clicked
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: video_id,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
});
function onPlayerReady(event) {
$('PLAY_BUTTON').on('click', function() {
// Play video when PLAY_BUTTON is clicked
event.target.playVideo();
});
}

youtube buffering next video while playing current one

I have videoIds[youtubeIDs] lined to play youtube videos in mysite which is working fine with the below code.
But when second video starts it lags 1-2 sec to load and the loading youtube icon shows up.
Is there any way to buffer the next video while playing the current video, which will reduce the loading time which results the next video starts instantaneously.
<div id="player"></div>
<script>
var youtubeIDs=["qdW21vNQB1E","EcVeqY2QuSI","UOV49oGr2pc"];
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 onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars: { 'autoplay': 0, 'controls': 0,'autohide':1,'wmode':'opaque' },
/*loadPlaylist:{
listType:'playlist',
list:youtubeIDs,
index:parseInt(0),
suggestedQuality:'small'
}, */
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
//event.target.loadPlaylist(youtubeIDs,parseInt(2),15,'large');
event.target.cuePlaylist(youtubeIDs,parseInt(0),15,'large');
//event.target.playVideo();
event.target.playVideoAt(0);
}

Multiple Videos using Youtube API

I was wondering that if I have a list of hyperlinks that each one is linked to a Youtube video and I have Youtube player API on the page
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', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
the question is how to make videoId take variables?
so if I have 10 links every time I click on a link the player display that video?
thanks

You do this with the YouTube IFrame Data API: https://developers.google.com/youtube/iframe_api_reference
You can use loadVideoById() or cueVideoById();
player.loadVideoById({
videoId: videoId,
startSeconds: startSeconds,
endSeconds: endSeconds
});

Youtube Player won't start upon setTimeout, help needed

I have followed the Youtube API while constructing a player. I need to to call the autoplay function via javascript but it won't listen to the setTimeout function, and it won't start playing:
Could someone light me up where am I wrong?
Regards!
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event){
setTimeout(function(){
playVideo();
},5000);
}

As you are declaring player variable and later set it to instance of YT.Player, you have to use the same variable on setTimeout too.
setTimeout(function(){
player.playVideo();
},5000);