We Keep Coding

Autostart a youtube video from Javascript

I am trying to automatically start a youtube video when it loads and when it finishes I want it to alert that it's done.
This is my HTML/JS
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('done');
}
}
</script>
The part that alerts when the video is done is working but the auto-player doesn't. I HAVE TRIED TO PUT THE ?AUTOPLAY=1 TAG AFTER THE VIDEO URL BUT THAT DOESN'T SEEM TO WORK EITHER!
I have seen all the variations to this question and tried all the anwsers but none of them work.
Does anyone have any idea on what I should try next?

Thanks to cat my problem is solved!
All I had to do is go to chrome://flags/#autoplay-policy and select "No user gesture is required" in the dropdown menu under the "Autoplay policy" and then relaunch chrome.

player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
autoplay: 1,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}

Youtube iFrame API how do I invoke IframeAPIReady function after getting list of videos

I am making simple Youtube Video Player myself, and I'd like to know how to invoke onYouTubeIframeAPIReady() after I get a list of videos.
What I like to do is display the first video in list as initial video.
In my html somewhere:
<script src="//www.youtube.com/iframe_api"></script>
This is initial iframe embed code from official sample code:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player-box', {
// height: '390',
// width: '640',
videoId: {FIRST_VIDEO_ID},
events: {
'onReady': onPlayerReady,
// 'onStateChange': onPlayerStateChange
}
});
}
Here is how I get a list of vids:
$.getJSON(
'https://www.googleapis.com/youtube/v3/videos',
{
part: 'snippet',
id: {VIDEO_IDs},
key: {MY_API_KEY},
},
function(data) {
var items = data.items;
console.log(data);
// cannot put onYouTubeIframeAPIReady here...
}
);
I guess I cannot put onYouTubeIframeAPIReady() as $.getJSON's callback, since it is called outside the script.

I kinda solve this problem myself.
I wrapped everything inside var onYouTubeIframeAPIReady = function() {...
Here's how I done:
var onYouTubeIframeAPIReady = function() {
var videos = '{VIDEO_ID1}, {VIDEO_ID2}, {VIDEO_ID3}';
$.getJSON(
'https://www.googleapis.com/youtube/v3/videos',
{
part: 'snippet',
id: videos,
key: {MY_API_KEY},
},
function(data) {
var items = data.items;
console.log(items);
$.each(items, function(i, video){
console.log(video);
});
var player;
player = new YT.Player('player-box', {
// height: '390',
// width: '640',
videoId: {INITIAL_VIDEO_ID},
events: {
'onReady': onPlayerReady,
// 'onStateChange': onPlayerStateChange
}
});
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
// console.log(event.data);
// if (event.data == YT.PlayerState.PLAYING && !done) {
// everytime change vids playing for 6secs then stop
if (event.data == YT.PlayerState.PLAYING) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
}//$.getJSON callback
}

YouTube API starts two videos in the same time

I have two videos that are controlled with YouTube api, everything works fine excepting that when the page loads the first video starts (this is normal) but on the same time you can hear the sound of the second video (this must start after first video ends or is manually closed) which can be better heard if you pause the first video...does anyone has a solution for this?
I think that this happens because both video are calling the onReady event.
It is a must to start the second video automatically when the first one ended or was closed.
<style>
.second-video {
display: none;
}
</style>
<div class="video-site">
<div class="first-video">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div id="player"></div>
</div>
<div class="second-video">
<div id="player2"></div>
</div>
</div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
var player2;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'qCDxEif_9js',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '390',
width: '640',
videoId: '43jHG-yH9Gc',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
$('.close').click(function(){
$('.first-video').hide(3000);
event.target.stopVideo();
$('.second-video').fadeIn();
});
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
$('.first-video').hide(3000);
$('.second-video').fadeIn();
}
}
</script>
http://jsfiddle.net/yjrx8uyz/

I updated your fiddle http://jsfiddle.net/yjrx8uyz/3/
Basically you have to check which player has fired the ready event and closing event.
if(event.target == player)
Ref : How to detect when a youtube video finishes playing?

Can't get a Youtube background video script in an IF statement.(Javascript/jquery)

I have 2 working scripts, the first using the youtube player api:
(#container_home contains a logo showing after the video ends)
$(document).ready(function() {
$("#container_home").hide();
$("#player").hide();
});
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
controls: 'false',
videoId: 'kCdFqMJPqyQ',
playerVars: {
'showinfo': 0,
'rel': 0,
'controls': 0},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
$("#player").fadeTo( "fast" , 1);
$(".jay_load").hide();
}
function onClick(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
$("#player").hide();
$("#container_home").show(2000);
}
}
And the second tells me if I'm using a desktop computer or another device (using wurfl script):
$.getScript("//wurfl.io/wurfl.js")
.done(function() {
$.wurfl = WURFL;
if ($.wurfl.form_factor === 'Desktop') {
alert ('yes');
};
});
So my goal is to run the youtube script only on desktop browsers.
I tried to copy the first script and paste it over
alert ("yes");
But thats not working. I hope someone can help me.
Thanx!

how to display lightbox after Video Play Finishes?

I have a youtube video.
I want to show a lightbox when it stops playing. I need this to be done using javascript/jQuery or PHP. Ajax is also fine.
I looked for a solution but didn't find one that worked.

If you can use youtube api then, something like this should work:
<script type="text/javascript">
$(document).ready(function() {
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'YmHAAqOsBqA',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if(event.data === 0) {
//completed playing
//open lightbox
$('#yourElementId a').lightBox();
}
}
});
</script>
Did you mean something like this.
Hope it helps