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

如何解决使用视口缩放全宽视频背景行

我不是开发人员，我将在这里痛苦地说明：

在我公司网站首页的顶部有 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。

非常感谢。

解决方法

您可以使用以下 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>