安卓浏览器中iframe嵌入Google Drive视频全屏强制横屏方案咨询

我开发了一个嵌入Google Drive视频的网站，在安卓浏览器中播放该视频并进入全屏模式时，视频仍保持竖屏状态。希望实现进入全屏时自动强制切换为横屏，当前使用的HTML和CSS代码如下：

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

由于Google Drive视频是跨域iframe，无法直接控制内部视频的全屏行为，且安卓浏览器对屏幕方向API的支持存在限制，可通过视觉模拟横屏+监听全屏事件的方式实现需求：

1. 添加CSS样式 #

在现有CSS末尾追加以下代码，用于全屏状态下的横屏布局：

/* 全屏状态下的容器横屏样式 */
.konteneriframe.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vh;
    height: 100vw;
    transform: rotate(90deg);
    transform-origin: top left;
    z-index: 9999;
}

.konteneriframe.fullscreen .videoiframe {
    width: 100%;
    height: 100%;
    min-height: unset;
    max-height: unset;
}

/* 退出全屏后还原布局 */
@media screen and (orientation: portrait) {
    .konteneriframe:not(.fullscreen) {
        transform: none;
        width: 100%;
        height: auto;
    }
}

2. 添加JavaScript代码 #

在HTML的</body>标签前插入以下JS代码，监听全屏事件并切换样式：

const iframeContainer = document.querySelector('.konteneriframe');
const iframe = document.querySelector('.videoiframe');

// 处理全屏状态变化
function handleFullscreenChange() {
    const isFullscreen = document.fullscreenElement || 
                        document.webkitFullscreenElement || 
                        document.mozFullScreenElement || 
                        document.msFullscreenElement;
    
    if (isFullscreen) {
        // 进入全屏，添加横屏样式
        iframeContainer.classList.add('fullscreen');
        // 尝试调用系统屏幕方向API（部分安卓浏览器支持）
        if (screen.orientation && screen.orientation.lock) {
            screen.orientation.lock('landscape')
                .catch(err => console.log('无法锁定屏幕方向:', err));
        }
    } else {
        // 退出全屏，移除样式并还原屏幕方向
        iframeContainer.classList.remove('fullscreen');
        if (screen.orientation && screen.orientation.unlock) {
            screen.orientation.unlock();
        }
    }
}

// 绑定各浏览器兼容的全屏事件
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);

// 监听iframe点击，延迟检测全屏状态（解决跨域无法捕获内部事件的问题）
iframe.addEventListener('click', () => {
    setTimeout(() => handleFullscreenChange(), 500);
});

注意事项 #

• 部分安卓浏览器可能因权限限制，无法通过screen.orientation.lock强制锁定系统横屏，此时视觉旋转的样式仍能保证视频以横屏比例显示。
• 跨域iframe无法直接捕获内部的全屏触发事件，所以添加了iframe点击后的延迟检测逻辑，确保状态切换能被触发。

内容的提问来源于stack exchange，提问作者agung