如何让网站视频在移动设备端实现全屏播放（允许画面裁切）

修改说明 #

• 修正HTML结构错误：将title、meta标签移入head标签内，符合标准语法规范
• 修复类名关联问题：给video标签添加class="video"，匹配你预设的固定定位CSS规则，这是原有代码移动端不生效的核心原因
• 新增object-fit: cover属性：视频会按原始比例缩放撑满整个视口，超出部分自动裁切，符合你接受画面裁切的需求
• 将video宽高设置为100vw、100vh，强制占满整个设备屏幕，不受父元素尺寸限制
• 修正z-index属性写法错误：z-index为纯数值属性，原有写法误加了px单位
• 补充多浏览器兼容的全屏权限属性，适配移动端不同内核浏览器

完整修改后代码 #

<!DOCTYPE html>
<html lang="en; jp;">
<head>
<title>言語の選択 - Select Language</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.relative {position: relative;}
.absolute {position: absolute;left: 35px;top: 38px;}
.video {position: fixed;left: 0;top: 0;z-index: 1;}
p {color: white;text-decoration:none; color: white; text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;font-size: 400%;margin: 50px;position: relative;z-index: 3;}
</style>
</head>
<body>
<video src="photos/Home_Page/Home/Home_Page.mp4" autoplay loop muted playsinline class="video" allowfullscreen webkitallowfullscreen mozallowfullscreen style="object-fit: cover; width: 100vw; height: 100vh; overflow: hidden;">
</video>
<div class="relative">
<p style="text-align: left; font-size: 80px; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .45;"><a href="Website_Home_Page.html" style="text-decoration:none; color: black; text-shadow:1px 1px 0 darkgray,-1px 1px 0 darkgray,1px -1px 0 darkgray,-1px -1px 0 darkgray;">小泉</a></p>
</div>
<div class="absolute">
<p style="text-align: left; font-size: 29px; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .8;"><a href="Website_Home_Page.html" style="text-decoration:none; color: black; opacity: .8; text-shadow:.5px .5px 0 #fff,-.5px .5px 0 #fff,.5px -.5px 0 #fff,-.5px -.5px 0 #fff;">Koizumi</a></p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p style="text-align: center; font-size: 30px; font-family: sans-serif; overflow: hidden;"><a href="Website_Home_Page.html" style="text-decoration:none; color: white; text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;"><b>日本語 </b></a> |  <a href="Website_Home_Page_English.html" style="text-decoration:none; color: white; text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;"><b>English</b></a></p>
</body>
</html>

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