Google Drive嵌入视频在安卓端无法控制操作的问题求助

可行解决步骤 #

• 修正HTML语法错误
  现有代码</div>标签后存在冗余的</h1>闭合标签，会触发移动端浏览器的怪异渲染模式，直接删除该冗余标签即可。
• 修正Google Drive嵌入链接格式
  确保填入src属性的链接为Google Drive专用嵌入链接：将原文件预览链接中的/view后缀替换为/preview，同时确认该视频文件的权限设置为「任何拥有链接的用户均可查看」，避免移动端加载时控制组件被权限拦截隐藏。
• 补充iframe属性避免控制权限限制
  在iframe标签中补充allowfullscreen独立属性，同时调整allow属性中的权限项顺序，新增muted静音许可，避免移动端 autoplay 限制导致控制组件失效。
• 新增响应式样式避免触控区域偏移
  现有代码的.videoWrapper类未配置样式，固定宽度640px的iframe在安卓移动端会超出屏幕宽度，导致视频控制栏的触控区域和实际显示位置错位，无法响应点击，补充对应响应式样式即可。

修正后的完整代码示例 #

<!DOCTYPE html>
<html> 
<head>
<style>
.videoWrapper {
  max-width: 100%;
  margin: 0 auto;
}
.videoWrapper iframe {
  max-width: 100%;
  border: none;
}
</style>
</head>
<body style="background-color:#333333;">

<h1 style="color:white;" align="center">Heading</h1>

<div class="videoWrapper">
  <p align="center">
    <iframe src="替换为你的谷歌云盘/preview结尾的嵌入链接" width="640" height="390" 
    allow="accelerometer; autoplay; muted; encrypted-media; gyroscope; picture-in-picture; fullscreen" 
    allowfullscreen>
    </iframe>
  </p>
</div>

</body>
</html>

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