Problems with Youtube Iframe Api to start playing video on Chrome - youtube-iframe-api

Question

I have following starting setup:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Then in onPlayerReady handler I added event listener to button which is outside iframe:
function onPlayerReady(event) {
button.addEventListener('click', () => event.target.playVideo());
}
In onPlayerStateChange I'm just logging what is happening:
function onPlayerStateChange(event) {
console.log(event.data);
}
After hitting that button in Chrome (v.72.0.3626.119) there are 3 entries in console: -1 (UNSTARTED), 3 (BUFFERING), -1 (UNSTARTED). When I try to hit button again nothing happens.
This works perfectly in Firefox, IE giving in console: -1 (UNSTARTED), 3 (BUFFERING),1 (PLAYING) and simply video starts playing.
Do you have any idea how to solve it?

Answer 1

You have to add in the onPlayerReady function this line:
event.target.playVideo();
As is shown in the documentation:
Example:
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
I can't say for sure why, but, in Google Chrome, for autoplay the video, you need to set the value 1 to the mute parameter, otherwise, autoplay the video wont work.
Example:
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: '<YOUR_VIDEO_ID>',
playerVars: {
'autoplay': 1,
'loop': 1,
'mute': 1 // N.B. here the mute settings.
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
You can check this jsfiddle for guide yourself how you can set custom controls for play/pause your embed video.

Answer 2

I have sent a key after load html, and it works for me.
KeyEvent k = new KeyEvent();
k.WindowsKeyCode = 0x0D;
k.FocusOnEditableField = true;
k.IsSystemKey = false;
k.Type = KeyEventType.Char;
webytb.GetBrowser().GetHost().SendKeyEvent(k);

Answer 3

From this answer, Google Chrome need the allow="autoplay" attribute on iframe to let JS controls the player or make auto play function work.
This is required if you manually use <iframe> instead of <div> tag.
Example:
Attention! Please note that it maybe not work if the result iframe of this site don't have allow="autoplay" attribute on iframe. Copy and paste HTML & JavaScript into your .html file is the best way to test that it is really working.
var player;
/**
* Load YouTube API JavaScript
*/
function loadYTAPIScript() {
console.log('loading YouTube script.');
let tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
/**
* On YouTube iframe API ready
*
* This function will be called automatically by YouTube.
*/
function onYouTubeIframeAPIReady() {
console.log('function `onYouTubeIframeAPIReady` was called.');
player = new YT.Player('player', {
events: {
'onError': onError,
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onError(event) {
console.error('YouTube API error!', event);
} // _onError
/**
* On player ready.
*
* This is callback function from `onReady` event in `onYouTubeIframeAPIReady()`.
*/
function onPlayerReady(e) {
console.log('function `onPlayerReady` was called from `onReady` event callback.', e);
listClickButtons();
}
/**
* On player state change.
*
* This is callback function from `onStateChange` event in `onYouTubeIframeAPIReady()`.
*/
function onPlayerStateChange(e) {
console.log('function `onPlayerStateChange` was called from `onStateChange` event callback.', e);
let state = e.target.getPlayerState();
let stateText = '';
if (state === -1) {
stateText = 'unstarted';
} else if (state === YT.PlayerState.ENDED) {
stateText = 'ended';
} else if (state === YT.PlayerState.PLAYING) {
stateText = 'playing';
} else if (state === YT.PlayerState.PAUSED) {
stateText = 'paused';
} else if (state === YT.PlayerState.BUFFERING) {
stateText = 'buffering';
} else if (state === YT.PlayerState.CUED) {
stateText = 'cued';
}
console.log('State text: ', stateText);
}
/**
* Listen on click buttons to controls the video.
*
* This method was called from `onPlayerReady()`.
*/
function listClickButtons() {
console.log('Listen click buttons.');
let isPlayed = false;
let playpauseBtn = document.getElementById('yt-playpause');
let stopBtn = document.getElementById('yt-stop');
playpauseBtn.addEventListener('click', (e) => {
e.preventDefault();
console.log('User click on play/pause button.');
if (isPlayed === false) {
player.playVideo();
isPlayed = true;
} else {
player.pauseVideo();
isPlayed = false;
}
});
stopBtn.addEventListener('click', (e) => {
e.preventDefault();
console.log('User click on stop button.');
player.stopVideo();
});
}
document.addEventListener('DOMContentLoaded', (e) => {
console.log('DOM ready.');
loadYTAPIScript();
});
<iframe id="player"
width="560" height="315"
src="https://www.youtube.com/embed/1L904pgYbOE?enablejsapi=1"
title="YouTube video player"
allow="autoplay"
allowfullscreen=""
></iframe>
<!--
The `iframe` URL (`src` attribute) must contain enablejsapi=1 query string to let JS API work.
The `iframe` must contain `allow="autoplay"` attribute to allow JS controls the player.
-->
<div class="yt-controllers">
<button id="yt-playpause" type="button">
Play/Pause
</button>
<button id="yt-stop" type="button">
Stop
</button>
</div>
See full code on jsfiddle.
Reference:
Iframe
Iframe allow features list
YouTube Iframe API