What is the process for setting an AMP-video as a full-page background?

My homepage features a captivating hero video in the background, but I've encountered an issue where the AMP video does not scale properly to fit the screen on mobile devices.

Here's the code snippet causing the problem: 

    <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;">

....

The strange thing is that a similar setup on another site works perfectly fine.

htmlcssvideobackgroundamp-html

Answer №1

Utilize the Web Inspector / DOM Explorer (Keyboard Shortcut - Ctrl + Shift +C) in Chrome Browser's Debugging tools (Keyboard Shortcut - F12) to pinpoint the specific amp.css class and attribute causing your amp-image/amp-video from scaling to the entire page, then set it to none within your style amp-custom block. Please note that this solution is not recommended by AMP but serves as a temporary workaround for addressing the issue.

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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting a problem with CSS animations disappearing

I've been experimenting with CSS animations and I've run into a bit of a snag. I'm looking to create a div that fades in with a delay - meaning it won't be visible until the animation starts. Here's what I have so far: http://jsfi ...

htmlcssanimation

Aligning the navigation links vertically

I am working on aligning my navigation bar vertically, even when I scroll the page. I found a method in another thread which suggests using the following CSS code for vertical alignment: #container { position: absolute; top: 50%; height: 400p ...

htmlcssalignment

Tips for designing a HTML form using classes

I need help styling this form using CSS because I have similar areas like a search submit button that require different classes. Any assistance would be greatly appreciated. <perch:form id="contact" method="post" app="perch_forms"> <perch:cont ...

htmlcssformsperch

Tips on Updating Array Value with jQuery

I have been working on using jQuery to edit array values. Here is my approach: From a modal, each time I click the "Add item" button, it pushes values to an array and appends the data to a table. var iteminfo = { "row": 'row' + cnt, "ma ...

htmljqueryhtml-table

Positioning my login form in the right spot is proving to be a challenge

I'm working on integrating this form into my website, but I'm having trouble placing it in the top right corner of the header. Below is the HTML code: $(function(){ var $form_inputs = $('form input'); var $rainbow_and_b ...

htmlcssforms

PHP version 7.2.1 is throwing an error indicating an undefined index for the file_upload

Encountering an error message: Notice: Undefined index: file_upload in C:\MAMP\htdocs\basic_files\upload.php on line 3 Each time I attempt to upload a file using the form. While many attribute this issue to problems with enctype or ...

phphtmlfile-uploadundefined-index

Leverage CSS variables within the `url('data:image/svg+xml')` function

Here is a CSS snippet I use to create a dashed border around a div: div { width: 100px; height: 100px; border-radius: 16px; background-image: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w ...

csssvgcss-variables

Arrangement of cards in a column

As someone who is new to working with CSS, Wordpress, and similar technologies, I am seeking assistance. I am struggling with creating card layouts. My goal is to achieve a layout similar to this, where the cards are displayed in two columns instead of ju ...

htmlcsswordpresslayout

Splitting columns evenly in a table with a width of 100%

Welcome to my first query on this platform. Despite my efforts to search for a solution, I couldn't find an explanation as to why my code isn't functioning correctly in Internet Explorer (10+). I have created three divs displayed as cells, each ...

htmlcssinternet-explorer-10css-tables

Tips for making search results stand out

Hey there! I've got a search function set up to look for keywords in a database. I'm interested in highlighting those keywords and found a second function that I want to integrate into my search function. This is the current code for the search: ...

phpmysqlhtmlfunctionsyntax-highlighting

What is the reason for the overflow occurring in a container of identical size due to this particular element?

I've encountered an issue while trying to create a div with a scrollbar that only appears when the elements within it don't fit the default area. <div style="overflow-y: auto; height: 36px;"> <img src="." width="36" height="36" /> ...

htmlcss

Customizing the default font color in Angular Material

I am currently navigating through theming in Angular Material and feeling a bit disoriented. I have implemented the prebuilt indigo-pink theme by importing it into my styles.scss as shown below: @import "~@angular/material/prebuilt-themes/indigo-pink.css" ...

cssangularangular-materialangular-material-theming

Why is the toggle functioning properly?

After much trial and error, I finally got my toggle functionality working with the following code. I was surprised that toggling the width actually changed the display settings, but it did the trick! It's still a bit mysterious to me how it all works ...

jqueryhtmlcss

What methods can be used to identify the specific Router component being rendered in React?

I am currently working with a Navbar component that I want to render with different CSS styles using styled-components based on the route of the component being rendered. How can I determine whether that component is being rendered or not? const NavbarCont ...

cssreactjsreact-routerstyled-components

Does the 'span' element negatively impact the vertical alignment of text?

While working on my code, I noticed an issue with vertical alignment when using span tags to change the background of the text based on its content. The problem occurs specifically when viewing the code in the Android Chrome browser. You can view the initi ...

htmlcsstext-alignmenttext-align

Embed a data entry point into an existing picture

Looking for assistance inserting a field within an image for users to enter their email. Can someone provide the HTML code for this? Appreciate your help! ...

htmlcss

Positioning children in CSS Flexbox: one at the top and the

Is there a way to position the a element at the top and the button at the bottom, using only flex properties without absolute or fixed positioning? Currently, the button is at the bottom but the title is not at the top: .all { display: flex; hei ...

htmlcssflexbox

Adding a border to the <area> element: A step-by-step guide

Can a border be added around an <area> element? This would be useful for testing an imagemap, however the following code does not achieve the desired effect: area { outline: 1px solid red; border: 1px solid red; } ...

javascripthtmlcss

Ensure that the HTML image and text are positioned side by side, with the text appearing alongside the picture rather than below

Looking for a way to keep the text aligned to the right of an image, regardless of length? Check out this exercise: https://www.example.com/css/exercise-1 Is there a method to maintain the text layout next to an image while accommodating varying amounts o ...

htmlcss

What is the best way to position a bigger character directly above a smaller container?

My goal is to center a single character, using CSS, in a span that is smaller than the character itself. The setup I have is: <span id="A">X</span><span id="B">Y</span><span id="C">Z</span> All three spans are styled ...

htmlcsscentering