Stop video auto play in fullscreen mode on iOS!


#1

Hi guys,

In short, I have embedded a youtube video in my app using iframe and set it to auto play when the player’s ready after a user has entered that specific page.

-Problem I’m facing: the video player behaves as I expected on Android devices. The user enters the page, the video is played automatically without pressing the ‘play’ button, when he/she wants to go fullscreen, just hit ‘fullscreen’. Sames go for when that user wants to pause the video.

However, on iOS: the user enters the page --> the video plays automatically in full screen mode which definitely not what I want --> the video is paused when the user exits full screen and if he/she hits ‘play’, it goes fullscreen again. Basically, it’s only playable in full screen.

-The question is: is there any way I can achieve the same behaviors of the video player as on Android for iOS? Thank you so much, any help would be really appreciated.

-This is the html:

 <iframe id="iframeTube" width="100%" height="250" src="https://www.youtube.com/embed/b5cv7ihxBeY?enablejsapi=1&fs=1" frameborder="0"
                style="border: solid 4px #37474F" allowfullscreen></iframe>

-this is the video being processed in .ts file:

ionViewWillEnter() {
    this.onYouTubeIframeAPIReady();
  }
  ionViewDidEnter() {   
    this.fullscreenProcess(this);        
  }

  onYouTubeIframeAPIReady() {
    this.player = new YT.Player('iframeTube', {
      events: {
        'onReady': this.onPlayerReady,
        'onStateChange': this.onPlayerStateChange
      }
    });
  }
  onPlayerReady(event) {
    console.log('ready')
    var embedCode = event.target.getVideoEmbedCode();
    event.target.playVideo();   
    var self = this;
  }
  fullscreenProcess(self)
  {
      document.addEventListener("webkitfullscreenchange", function (event) {
     
      if (document.webkitIsFullScreen) {
        console.log("full")
        self.screenOrientation.lock(self.screenOrientation.ORIENTATIONS.LANDSCAPE);
      }
      else {
        self.screenOrientation.unlock();
        console.log("not full")
      }
    });
   
  }