这问题我刚好处理过，用「相对定位的容器+绝对定位的视频」组合就能完美解决你的需求，既适配手机轮廓的屏幕区域，又能实现响应式缩放，下面是具体步骤：

1. HTML 结构设计 #

首先我们需要一个容器来承载手机背景图和视频，视频直接放在容器内部即可：

<div class="phone-container">
  <video class="phone-video" controls>
    <source src="your-video.mp4" type="video/mp4">
  </video>
</div>

2. CSS 核心样式 #

容器样式（手机轮廓载体） #

给容器设置相对定位作为视频的定位上下文，同时把手机轮廓设为背景图，用background-size: contain确保背景图自适应容器大小：

.phone-container {
  /* 让容器成为定位上下文 */
  position: relative;
  /* 控制容器最大宽度，实现响应式 */
  max-width: 90vw;
  /* 高度自适应背景图比例，避免容器塌陷 */
  aspect-ratio: 9/16; /* 这里替换成你手机轮廓图的宽高比，比如常见的手机是9:16 */
  margin: 0 auto;
  /* 设置手机轮廓背景图 */
  background-image: url("your-phone-outline.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

视频元素样式（适配屏幕区域） #

通过绝对定位把视频精准放在手机轮廓的屏幕位置，用百分比单位确保容器缩放时视频同步按比例调整：

.phone-video {
  position: absolute;
  /* 下面的数值需要你根据自己的手机轮廓图调整 */
  top: 14%; /* 屏幕顶部距离容器顶部的百分比 */
  left: 7.5%; /* 屏幕左侧距离容器左侧的百分比 */
  width: 85%; /* 屏幕宽度占容器宽度的百分比 */
  height: 72%; /* 屏幕高度占容器高度的百分比 */
  /* 因为视频和屏幕比例一致，用fill保证完全填充，不会变形 */
  object-fit: fill;
  /* 保证视频的交互事件正常触发 */
  pointer-events: auto;
}

3. 关键细节调整 #

• 如何获取精准的百分比数值？
  你可以用PS或者在线图片测量工具，先测量手机轮廓图的总宽高，再测量屏幕区域的左上角坐标、宽高，然后用「屏幕数值 ÷ 容器总数值 × 100%」得到对应的百分比。比如容器总宽度是1000px，屏幕左侧距是75px，那left就是7.5%。
• 响应式适配
  因为我们用了max-width: 90vw和aspect-ratio，容器会自动根据屏幕宽度缩放，而视频的所有定位和尺寸都是百分比，所以会跟着容器同步缩放，完美实现响应式效果。
• 视频比例匹配
  你提到视频和屏幕比例一致，所以object-fit: fill刚好能让视频完全填充屏幕区域，不会出现黑边或拉伸变形；如果后续比例有变化，可以换成object-fit: contain来保持视频比例。

关于「两个绝对定位元素」的补充 #

其实你说的思路也可行，但用相对容器+绝对视频的方式更简洁——容器作为定位上下文，不需要额外给手机轮廓单独加绝对定位元素，直接把它设为容器背景图即可，代码更精简，维护也更方便。

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