<body>
<div id="player_block"></div>
<button id="fullscreen-btn">Fullscreen</button>
<script> "use strict"
let scrpt = document.createElement('script')
scrpt.src = 'https://www.youtube.com/iframe_api'
document.body.appendChild(scrpt)
let player = null
window.onYouTubeIframeAPIReady = function()
{
let ups = {
width : 500,
height : 300,
videoId : 'vZK1V5aekF0',
controls : 1,
events : {
onReady : player_ready,
onStateChange : player_changed,
},
}
player = new YT.Player('player_block', ups)
}
let player_ready = function(event)
{
let player_window = document.querySelector('#' + 'player_block')
player_window.allowfullscreen = 'allowfullscreen'
event.target.playVideo()
}
let player_changed = function()
{
}
var button = document.getElementById('#fullscreen-btn');
button.addEventListener('click', fullscreen);
// when you are in fullscreen, ESC and F11 may not be trigger by keydown listener.
// so don't use it to detect exit fullscreen
document.addEventListener('keydown', function (e) {
console.log('key press' + e.keyCode);
});
// detect enter or exit fullscreen mode
document.addEventListener('webkitfullscreenchange', fullscreenChange);
document.addEventListener('mozfullscreenchange', fullscreenChange);
document.addEventListener('fullscreenchange', fullscreenChange);
document.addEventListener('MSFullscreenChange', fullscreenChange);
function fullscreen() {
// check if fullscreen mode is available
if (document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled) {
// which element will be fullscreen
var iframe = document.querySelector('#player_block iframe');
// Do fullscreen
if (iframe.requestFullscreen) {
iframe.requestFullscreen();
} else if (iframe.webkitRequestFullscreen) {
iframe.webkitRequestFullscreen();
} else if (iframe.mozRequestFullScreen) {
iframe.mozRequestFullScreen();
} else if (iframe.msRequestFullscreen) {
iframe.msRequestFullscreen();
}
}
else {
document.querySelector('.error').innerHTML = 'Your browser is not supported';
}
}
function fullscreenChange() {
if (document.fullscreenEnabled ||
document.webkitIsFullScreen ||
document.mozFullScreen ||
document.msFullscreenElement) {
console.log('enter fullscreen');
}
else {
console.log('exit fullscreen');
}
// force to reload iframe once to prevent the iframe source didn't care about trying to resize the window
// comment this line and you will see
var iframe = document.querySelector('iframe');
iframe.src = iframe.src;
}
</script>
</body>
