iframe 视频全屏时如何强制横向模式

Question

我制作了一个网站，其中嵌入了从谷歌驱动器中嵌入的视频，当我在 Android 浏览器上播放该视频时遇到问题，如果我进入全屏模式，方向视频仍处于纵向模式，如下所示。

我想在像这样的全屏模式下自动强制它进入横向模式。

这是我的html代码：

<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>

这是我的CSS代码：

.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;
    }
}

我需要添加任何代码，例如 javascript 或 css 代码吗？

请帮忙。非常感谢。

Answer 1

您可以使用 fullscreenchange 和 webkitfullscreenchange 事件监听全屏更改事件。 当全屏模式更改时，我们检查视频 iframe 是否处于全屏模式。 如果视频iframe处于全屏模式，我们调用forceLandscapeMode()函数。

将此代码添加到您的 html 代码之后

<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';
}