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

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.

having trouble with youtube player api

A feature I am trying to implement in my rails app is the ability for users to control embedded youtube videos. I am using the youtube player api (guidelines here: https://developers.google.com/youtube/iframe_api_reference).
In the guidelines, it is always creating a new YT player:
// 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,
'onStateChange': onPlayerStateChange
}
});
}
My question is how can I play an already embedded youtube video with an outside 'play' button.
The error is on the player = new YT.Player line. I don't want to make a new player, just control the already embedded video.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event){
event.target.playVideo();
document.id("start").click(function () {
player.playVideo();
});
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
my iframe:
<iframe title="YouTube video player" id="video" width="540" height="290" src="http://www.youtube.com/embed/#{ youtube_id }?rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
header view with play button:
<div id="start">
<%= image_tag("playback_play.png") %>
</div>
(rails app)
if you need more code, let me know, thanks for the help!

Not a direct answer to your question, but a potential solution for you:
<div id="player"></div>
<div id="start" style="display: none;">
<%= image_tag("playback_play.png") %>
</div>
<script>
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '#{ youtube_id }', // not sure if you want that or <%= youtube_id %> in this case
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event){
//event.target.playVideo(); // commented out -- uncomment if you want autoplay
document.id("start").show();
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>