CODEWITHSUNDEEP
jquerymobileresponsive-designyoutube-api
tjoenz
tjoenz

Reputation: 709

YouTube API video player not working on mobile, even if I take out the autoplay

I'm working on a YouTube video playing in the main section of a site. It loads and plays fine on desktop but on mobile it starts to load, giving a blank black screen, and then nothing. I have tried to take out the events for playing that are described not to work on mobile and still no luck. Does anyone else see something I am missing in this code? Thanks in advance!

JS

//Load player api 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);
var done = false;
var player;


function onYouTubeIframeAPIReady() {
    // if (typeof videoId === "undefined")
    //   var videoId = false;
    player = new YT.Player('youtube-video', {
      height: '390',
      width: '640',
      videoId: videoId,
      playerVars: {
            html5: 1,
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(evt) {
    if( videoAutoPlay ) {
      $('#video-bg-image').fadeOut(1000);
        evt.target.playVideo();
    }
}
function onPlayerStateChange(evt) {
  if(evt.data === 0 || evt.data === 2)
    $('#video-bg-image').stop(true, true).fadeIn(400);

  console.log(evt);
    // if (evt.data == YT.PlayerState.PLAYING && !done) {
    //     setTimeout(stopVideo, 6000);
    //     done = true;
    // }
}
function stopVideo() {
    player.stopVideo();
}
function playVideo() {
  player.playVideo();
}

Upvotes: 1

Views: 505

Answers (1)

Dihgg
Dihgg

Reputation: 11

try remove the autoplay function (evt.target.playVideo()) in onPlayerReady().

Upvotes: 1

Related Questions