一、修复视频与下载按钮之间的多余空白 #

根据你的描述，嵌入视频的iframe通常会自带默认样式，或是容器布局属性导致额外空白，你可以试试这些方案：

1. 重置iframe的默认样式
   给视频iframe添加内联样式或CSS类，消除默认外边距和对齐问题：

   <iframe src="你的视频链接" style="display: block; margin: 0 auto; border: none;" width="640" height="360"></iframe>
   

   关键是display: block——很多时候iframe默认是inline-block，会和基线对齐导致下方出现空白，改成块级元素就能解决这个问题。

2. 检查容器的多余间距
   查看包裹视频的父元素（比如<div>）有没有设置margin-bottom或者padding-bottom，如果有的话，把这些值调整为0或合适的大小。

3. 确认视频的尺寸设置
   确保iframe的height值和视频实际高度匹配，不要设置过大的高度，否则下方会出现空白区域。如果用的是第三方视频平台，也可以直接使用它提供的响应式嵌入代码替代固定尺寸代码。

二、实现视频的移动端响应式适配 #

要让视频在移动设备上自动适配屏幕宽度、不超出边缘，推荐用响应式容器包裹iframe的方案，这是目前最通用的多平台兼容方法：

步骤1：添加响应式容器的CSS #

在你的样式表中添加这段CSS：

.video-container {
  position: relative;
  width: 100%;
  max-width: 640px; /* 限制视频的最大宽度，和桌面端一致 */
  margin: 0 auto; /* 居中显示 */
  padding-top: 56.25%; /* 16:9的视频比例，计算方式是9/16*100% */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

如果你的视频是4:3比例，把padding-top改成75%即可。

步骤2：修改HTML结构 #

把原来的iframe放到这个容器里：

<div class="video-container">
  <iframe src="你的视频链接" title="Rhythmstix Lesson Viewer安装使用教程"></iframe>
</div>

这样设置后，视频会自动适应父容器宽度，在移动端会占满屏幕宽度（不超过max-width），同时保持正确比例，不会变形或超出屏幕。

你可以先试试这些调整，有问题再随时反馈~

内容的提问来源于stack exchange，提问作者Rob Reich-Storer