Thiết kế website giá rẻ

Question

I have an issue that when I press play on my youtube video (only on Android) in full screen mode upon trying landscape it stays in portrait mode. I have tried multiple solutions with none working. MediaMatch function had the same issue. Is there something I am missing as when I use the same code on iPhone it works as expected.

I also have the issue on on first play the full screen does not kick in until I refresh the second time after playing. I have attached the current code using. I’m I missing something?

Thanks

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .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;
        }
    </style>
    <script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
    <div class="container">
        <div class="responsive-video">
            <iframe id="youtubeIframe" width="560" height="315" src="https://www.youtube.com/n458tnkr5h" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>

    <script>
        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();
        });

    </script>
</body>
</html>

Thiết kế website giá rẻ

Danh mục

YouTube iframe full screen stuck in portrait mode chromium Android