时间戳

首页 > 解决方案 > 使用视口缩放全宽视频背景行

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

问题描述

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

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

提前谢谢了。

标签： csswordpressvideoviewportscaling

解决方案

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

推荐阅读