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")
}
});
}