响应式布局问题：YT视频悬浮图片的适配需求

想要实现YouTube视频悬浮在图片上方的效果，且整体具备响应式特性，具体需求如下：

• YouTube视频需以特定尺寸初始显示，并与下方图片同步响应

当前代码存在以下问题需要修复：

• 无法确保YouTube视频在图片内保持指定初始尺寸
• 屏幕缩小时，元素无法同步缩小

CSS #

.container {
       border: 1px solid #DDDDDD;
       position: relative;
    
    }
    .tag {
       float: left;
       position: absolute;
       left: 3%;
       top: 14%;
       z-index: 1000;
       background-color: #000000;
       padding: 5px;
       color: #FFFFFF;
       font-weight: bold;
       font-size:8vw
    }

HTML #

<div class="container">
    <div class="tag"><iframe width="560" height="315" src="https://www.youtube.com/embed/aaYqazlUMOA?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
      <img src="http://via.placeholder.com/732x295" alt="poulin" class="responsive">
</div>

以下是修改后的代码，解决了尺寸固定和响应式同步的问题：

修改后的CSS #

.container {
  border: 1px solid #DDDDDD;
  position: relative;
  max-width: 100%;
  display: inline-block; /* 让容器随图片宽度自适应 */
}

.responsive {
  max-width: 100%;
  height: auto; /* 图片响应式缩放 */
  display: block;
}

.tag {
  position: absolute;
  left: 3%;
  top: 14%;
  z-index: 1000;
  width: 60%; /* 按示例图比例设置视频宽度，可按需调整 */
  aspect-ratio: 16/9; /* 保持视频16:9的标准比例 */
}

.tag iframe {
  width: 100%;
  height: 100%;
  border: none;
}

修改后的HTML #

<div class="container">
  <div class="tag">
    <iframe src="https://www.youtube.com/embed/aaYqazlUMOA?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <img src="http://via.placeholder.com/732x295" alt="poulin" class="responsive">
</div>

关键修改说明 #

• 容器.container设置display: inline-block和max-width:100%，确保其宽度跟随图片自适应且不超出视口
• 图片通过.responsive类实现响应式缩放，保证在不同屏幕尺寸下比例正确
• 视频容器.tag移除无用的float属性，使用aspect-ratio维持视频的16:9比例，宽度用百分比控制初始占比
• iframe设置宽高100%，继承容器尺寸，实现与图片同步缩放
• 可通过调整left和top的百分比值，微调视频在图片上的悬浮位置

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