使用视口缩放全宽视频背景行答案

【问题标题】：Scaling full width video background rows with viewport使用视口缩放全宽视频背景行
【发布时间】：2021-09-20 01:08:10
【问题描述】：

我不是开发人员，我将在这里痛苦地澄清这一点：

我的公司网站主页顶部有 3 个全屏视频背景元素（papertown.tv — 请参阅标题为“应该如何”、“您的价值与重播价值”和“简单、持久的结果”的行'），这似乎是我一生无法强迫视口缩小的。换句话说，当视口缩小时，它们不会保持完整的视野，而是被各自的行裁剪。到了几乎无法分辨移动视频中发生了什么的地步。

我尝试了这个@media 查询，但它只是让视频在行内笨拙地漂浮：

@media (max-width: 798px) {
#this-is-how-mobile .fl-bg-video,
#your-value-with-mobile .fl-bg-video,
#simply-lasting-results-mobile .fl-bg-video
    {
 height: 1920px;
 width: 1080px;
 -webkit-transform: scale(.45);
        transform-origin: 0% -27%;
        z-index:-1!important;

该网站是在 WordPress 上使用 Beaver Builder 构建的（抱歉）。但这应该是一个简单的修复，不是吗？

很高兴向帮助我解决此问题的人发送一些 Doge 或 Ether。

非常感谢。

【问题讨论】：

链接失效，您是在托管视频还是链接 iframe？
链接也不适合我。我不确定您要通过转换实现什么，但是如果您设置 aspect-ratio: 16/9; 并且现在您可以设置宽度或高度（您可以使用 width:100% 与父级和aspect-ratio 是成比例的），它会以可预测的方式工作，而无需缩放或转换它。

标签： css wordpress video viewport scaling

【解决方案1】：

您可以使用以下 html/css 包装 iframe，它会缩放以适应容器的大小。

CSS

.video-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin-bottom: 30px;
}
.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML

 <div class="video-wrap">
      <!-- Copy & Pasted from YouTube -->
      <iframe width="560" height="349" src="https://player.vimeo.com/video/572629737?title=0&byline=0&muted=1&autoplay=1&loop=1&background=1&app_id=122963" frameborder="0" allowfullscreen></iframe>
 </div>

【讨论】：