how to force landscape mode when iframe video in fullscreen

Question

i make a website with video embedded from google drive, and i have a problem when playing that video on my browser android, if i entered to fullscreen mode the orientation video still in portrait mode like this.

enter image description here

i want to automatically force it to landscape mode when in fullscreen mode like this.

enter image description here

this is my html code:

<div class="konteneriframe">
<iframe class="videoiframe" title="<?php if($d['jenisfilm']=='Movie'){ echo $d['judulfilm']; } elseif($d['jenisfilm']=='Series'){ echo $d['judulfilm']; ?> Season <?php echo $d['musim']; ?> Episode <?php echo $d['episode']; } ?>" src="<?php echo $d["alamatfilm"]; ?>" frameborder="0" scrolling="no" seamless="" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
<div class="blockershare"></div>
</div>

and this is my css code:

.konteneriframe{
    position: relative;
    border:none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 490px;
    max-height: 550px;
}
.blockershare{
    width: 80px;
    height: 80px;
    position: absolute; 
    opacity: 0; 
    right: 0px; 
    top: 0px;
}
.videoiframe{
    border:none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 490px;
    max-height: 550px;
}
@media(max-width: 600px){
    .videoiframe, .konteneriframe{
        min-height: 250px;
    }
}
@media(width: 1366px){
    .videoiframe{
        max-height: 450px;
    }
}

@media(width: 1920px){
    .videoiframe{
        max-height: 700px;
    }
}

any code i need to add like javascript or css code?

Please help. thank you very much.

Answer 1

You can listen for fullscreen change events using the fullscreenchange and webkitfullscreenchange events. When the fullscreen mode changes, we check if the video iframe is in fullscreen mode. If the video iframe is in fullscreen mode, we call the forceLandscapeMode() function.

add this code after your html code

<script>
// Get the video iframe
var videoIframe = document.querySelector('.videoiframe');

// Listen for fullscreen change events
document.addEventListener('fullscreenchange', function(event) {
    handleFullscreenChange(event);
});

document.addEventListener('webkitfullscreenchange', function(event) {
    handleFullscreenChange(event);
});

// Function to handle fullscreen change events
function handleFullscreenChange(event) {
    var fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;

    // Check if the video iframe is in fullscreen mode
    if (fullscreenElement === videoIframe) {
        forceLandscapeMode();
    }
}

function forceLandscapeMode() {
    videoIframe.style.transform = 'rotate(90deg)';
    videoIframe.style.transformOrigin = 'center';
}