title: How to make AMP-video a full page background?
body: <p>I have <a href="https://www.recharge.ae" rel="nofollow noreferrer">this</a> homepage with hero video as background. The video is an AMP video and it doesn't scale to mobile's full screen.</p>
  
  <p>This is the code:
      
      </p>
  
  <pre><code>    &lt;amp-video
            autoplay
            loop
            width="640"
            height="360"
            class="hero"
            layout="fill"
            poster="{{URL::asset('p1.webp')}}"
            &gt;
            &lt;source src="{{URL::asset('dubai.webm')}}"
            type="video/webm" /&gt;
            &lt;source src="{{URL::asset('dubai.mp4')}}"
            type="video/mp4" /&gt;
            &lt;source src="{{URL::asset('v1.ogg')}}"
            type="video/ogg" /&gt;
            {{-- &lt;div fallback&gt;
              &lt;amp-img src="{{URL::asset('p1.webp')}}" width="640" height="360" alt="Dubai from above"&gt;&lt;/amp-img&gt;
            &lt;/div&gt; --}}
      &lt;/amp-video&gt;
  
  &lt;!--blue filter over the video--&gt;
  &lt;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;"&gt;
  
  ....
  </code></pre>
  
  <p>The problem is that I did something similar with <a href="https://www.excurj.com" rel="nofollow noreferrer">this</a> site and it works fine.</p>