Youtube Api playVideo method doesn't work on some mobile devices
I'm trying to create a mobile site where a YouTube video will play after clicking on an image.
I tested on multiple Android mobiles / versions and some not as intended.
I mean it stops when buffering and never reaches to play the video. Another thing I noticed is that the player works after the user starts the video, not programmatically. In more detail, if I show the YouTube player directly, the user clicks to play the video, and after that, press the button / image to play another video. It works.
I posted a test page here that I worked with with JsFiddle
$(document).ready(function () {
// Caching jQuery objects
var $body = $('body'),
$log = $('#log'),
$yt = $('#ytplayer'),
$ytwrap = $('#ytwrapper'),
$choices = $('#choices');
// This code loads the YouTube API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
$body.append(tag);
// This will become the player object when the API is ready
var player;
// See what kind of device we're using
var userAgent = navigator.userAgent.toLowerCase();
var isAndroid = userAgent.indexOf('android') > -1;
var isIpad = userAgent.indexOf('ipad') > -1;
var isIphone = userAgent.indexOf('iphone') > -1;
window.onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
videoId: videos[0],
playerVars: {
allowfullscreen: 'allowfullscreen',
playsinline: 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
window.player = player;
//hide player
slidePlayer(false);
};
function onPlayerStateChange(event) {
// When a video starts playing,
// enable the fake fullscreen mode on Android & iPad
if (event.data == YT.PlayerState.PLAYING) {
if (isIpad) {
fakeFullScreen(true);
} else if (isAndroid) {
fakeFullScreen(true);
}
}
// On pause: hide the player, show thumbs
if (event.data == YT.PlayerState.PAUSED) {
if (isAndroid) {
// Exit fullscreen
fakeFullScreen(false);
// Scroll back to choices
window.scrollTo(0, playerTop);
} else if (isIpad) {
fakeFullScreen(false);
window.scrollTo(0, playerTop);
} else if (isIphone) {
slide(false);
}
}
}
$('#vstImageAd .imageWrap img').click(function (e) {
e.preventDefault();
var $this = $(this);
if (player) {
$this.css("display", "none");
slidePlayer(true);
player.playVideo();
}
});
// When a thumb image is pushed, start the video
$('#choices .playthumb img').click(function (e) {
var $this = $(this),
nr = parseInt($this.data('nr'));
if (!videos[nr]) nr = 1;
player.loadVideoById(videos[nr]);
// Hide the thumbs
slide(true);
});
});
source to share
It looks like some of the functions you are using (player.playVideo ()) are disabled on mobile devices. In my case, after using player.playVideo () on some android devices, the video does not play even after clicking on the player
https://developers.google.com/youtube/iframe_api_reference?hl=zh-TW#Mobile_considerations
Autoplay and scenario replay
The HTML5 element, in some mobile browsers (like Chrome and Safari), only allows playback when triggered (like clicking on the player).
Due to this limitation, functions and options such as autoplay, playVideo (), loadVideoById () will not work in all mobile environments **
source to share