如何使AMP-video成为整页背景？

Question

我有this主页，其中包含英雄视频作为背景。该视频是AMP视频，无法扩展到移动设备的全屏。

这是代码：          

    <amp-video
          autoplay
          loop
          width="640"
          height="360"
          class="hero"
          layout="fill"
          poster="{{URL::asset('p1.webp')}}"
          >
          <source src="{{URL::asset('dubai.webm')}}"
          type="video/webm" />
          <source src="{{URL::asset('dubai.mp4')}}"
          type="video/mp4" />
          <source src="{{URL::asset('v1.ogg')}}"
          type="video/ogg" />
          {{-- <div fallback>
            <amp-img src="{{URL::asset('p1.webp')}}" width="640" height="360" alt="Dubai from above"></amp-img>
          </div> --}}
    </amp-video>

<!--blue filter over the video-->
<div class="v-text" style="z-index:2;position:absolute;background:rgba(2, 122, 195, 0.3)
;top:0;bottom:0;left:0;right:0;">

....

问题是我使用this网站做了类似的事情，但效果很好。

Answer 1

在Chrome浏览器的调试工具（键盘快捷键-F12）中使用 Web检查器/ DOM资源管理器（键盘快捷键-Ctrl + Shift + C）标识确切的 amp.css >类和属性，该类和属性不允许您的amp-image / amp-video缩放到整个页面，然后在您的 style amp-custom none 中使其 / strong>块。 这不是AMP建议的解决方案，而只是解决此问题的解决方法。

HTML

<div class="video-overlay">
   <amp-video src="//localhost/videos/AirplaneFootage.mp4" loop autoplay layout="fill" />
</div>

CSS

body {
position: absolute;
overflow-x: hidden;
z-index: 1;
}

.video-overlay {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: -1;
}

.video-overlay amp-video {        
width: 100%;
height: auto;
max-height: auto;
}

.video-overlay amp-video .i-amphtml-fill-content {
width: 100%;
height: auto;
max-height: none;
}