Полноэкранный режим YouTube iframe завис в портретном режиме Chrome Android ⇐ Android

[Anonymous]

У меня возникла проблема: когда я нажимаю кнопку воспроизведения на своем видео на YouTube (только на Android) в полноэкранном режиме, при попытке выбрать альбомную ориентацию оно остается в портретном режиме. Я пробовал несколько решений, но ни одно не помогло. Функция MediaMatch имела ту же проблему. Есть ли что-то, чего мне не хватает? Когда я использую тот же код на iPhone, он работает как положено.
У меня также есть проблема: при первом воспроизведении полноэкранный режим не включается, пока я не обновлю второй раз после игры. Я прикрепил текущий код, используя. Я что-то упустил?
Спасибо





.container {
width: 80%;
margin: 0 auto;
}
.responsive-video {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.responsive-video iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}







https://www.youtube.com/n458tnkr5h




var player;
var iframe = document.getElementById('youtubeIframe');
var src = iframe.src;

function onYouTubeIframeAPIReady() {
player = new YT.Player('youtubeIframe', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

function onPlayerReady(event) {
// Player is ready
}

function onPlayerStateChange(event) {
console.log('Player State Changed:', event.data);
if (event.data == YT.PlayerState.PLAYING) {
console.log('Video is playing, requesting fullscreen and landscape');
requestFullscreenAndOrientation();
} else if (event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED) {
console.log('Playback stopped or paused, reloading the player');
setTimeout(reloadPlayer, 100); // Call the reload function after a short delay
}
}

function reloadPlayer() {
console.log('Reloading player');
iframe.src = ''; // Clear the src attribute
iframe.src = src; // Reset the src attribute to reload the iframe
setTimeout(onYouTubeIframeAPIReady, 100); // Reinitialize the player after a short delay
}

function checkFullscreen() {
if (!document.fullscreenElement &&
!document.webkitFullscreenElement &&
!document.mozFullScreenElement &&
!document.msFullscreenElement) {
console.log('Exiting fullscreen, reloading the player');
setTimeout(reloadPlayer, 100); // Call the reload function after a short delay
}
}

function requestFullscreenAndOrientation() {
var element = iframe;
// Ensure that fullscreen is requested only when user interacts
if (element.requestFullscreen) {
element.requestFullscreen().then(lockOrientation).catch(console.error);
} else if (element.mozRequestFullScreen) { // Firefox
element.mozRequestFullScreen().then(lockOrientation).catch(console.error);
} else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT).then(lockOrientation).catch(console.error);
} else if (element.msRequestFullscreen) { // IE/Edge
element.msRequestFullscreen().then(lockOrientation).catch(console.error);
}
}

function lockOrientation() {
if (screen.orientation && screen.orientation.lock) {
screen.orientation.lock('landscape').catch(function(error) {
console.log('Error locking orientation:', error);
});
} else if (screen.lockOrientation) {
screen.lockOrientation('landscape').catch(function(error) {
console.log('Error locking orientation:', error);
});
}
}

// Add event listeners for fullscreen change
document.addEventListener('fullscreenchange', checkFullscreen);
document.addEventListener('webkitfullscreenchange', checkFullscreen);
document.addEventListener('mozfullscreenchange', checkFullscreen);
document.addEventListener('MSFullscreenChange', checkFullscreen);

window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;

// Force fullscreen on user interaction with the video
document.getElementById('youtubeIframe').addEventListener('click', function () {
requestFullscreenAndOrientation();
});






Подробнее здесь: https://stackoverflow.com/questions/788 ... um-android