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 iFrame APi won't fire onPlayerStateChange function

so I'm using the Youtube iFrame API to give me an alert when the video stops playing with the following code:
<div id="player"></div>
<script type="text/javascript">
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: '0Bmhjf0rKe8',
playerVars: {
'autoplay': 1,
'controls': 1,
'html5': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
var playerReady = false;
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
playerReady = true;
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
alert('done');
}
}
I tried this same code on jsfiddle: (http://jsfiddle.net/QtBlueWaffle/8bpQ8/1/) and it works fine there. Doesn't work on my local machine though. Any ideas?

setinterval stop working when I change youtube video

zzz=setInterval(function(){document.getElementById('bugbox').value =
player.getCurrentTime()}, 1000);
I play the video and I see the time in bugbox
When I click the button the video loads but setInterval don't show player.getCurrentTime(); in bugbox
onclick="document.getElementById('player').src='http://www.youtube.com/watch_popup?v=vt4X7zFfv4k'
First video is loaded from this 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);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
idv='qV5lzRHrGeg';
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: idv,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Edit:
Solved!
I use #NewToJS solution from the comment.

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
});