Using the Youtube Javascript API; is there a way to make the video play full screen when the 'Play' button is clicked?
I am aware of a way to make the video container full screen but this only works for the latest versions of Firefox and Chrome.
If there isn't any way to do this through the Youtube Javascript API, do you know of a Cross Browser way I could make the youtube video full screen when play is clicked?
This is how you make a video full screen when play is clicked for the latest versions of Firefox and Chrome browsers:
function onPlayerStateChange(event) {
var player = document.getElementById("MSJbUEj7U7M");
if (event.data != YT.PlayerState.BUFFERING && event.data != YT.PlayerState.CUED && event.data != YT.PlayerState.PLAYING)
return -1;
if (player.requestFullScreen) {
console.log("1()");
player.requestFullScreen();
}
else if (player.mozRequestFullScreen) {
console.log("2()");
player.mozRequestFullScreen();
}
else if (player.webkitRequestFullScreen) {
console.log("3()");
player.webkitRequestFullScreen();
}
}
function loadYouTubeVideo(uid) {
setTimeout( function() {
var id = uid;
var instPlayer = new YT.Player(id, {
height: '480',
width: '853',
enablejsapi: 1,
suggestedQuality: 'highres',
videoId: uid,
events: {
'onStateChange': onPlayerStateChange
}
});
}, 500);
}
</script>
It looks like you can't do this unless the user clicks full screen.
https://groups.google.com/forum/#!msg/youtube-api-gdata/Tyv3vTw0RQk/449KahYVNFYJ
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With