I'm trying to create a button in my website and when you press that button youtube player should start playing.
Now to do that i am using Youtube player API and playVideo
method and everything seemed to be working just fine until i tried testing it on mobile devices, for example iphone.
Player seems to get bugged when playVideo
method is called so my best guess is that its fault on google end but i can't seem to find any fix for that.
I made jsFiddle
Also demo website to test it on mobile devices: link
And here is the code
<div id="ytplayer"></div>
<a id="start" href="#">start</a>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'U6oKcAXiVlo',
playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo': 0 },
});
}
document.getElementById("start").addEventListener("click", function () {
player.playVideo();
});
</script>