Video in Layout Grid Changes in each screen size

[Ghardin]

I have a layout grid with an SVG file for the background for the index page only. I inserted a video in the grid and increased the top margin to move the video to the correct location at the bottom of the grid. Looks great on computer screen, but as I resize screen and especially on cell phone portrait, the location and size of the video seems uncontrollable. I have several breakpoints created to control location and size of video for each screen size, to no avail. I also found that in larger screen resolutions I have to set the background picture to cover, in smaller resolutions, I have to set it to contain because the SVG file is not resizing correctly. Maybe I need to create a second master page just for the index page (the other pages do not use the same logo as index page)?
Sample webpage: https://www.vettyfilms.com/Experimental3/index2.html

[crispy68]

Hey Ghardin,

When you set an image as the background and set it to 'cover', it's going to increase the size of the image to fill the entire container preserving the aspect ratio and will crop any parts of the image that don't fit where 'contain' ensures the entire image is visible within the container preserving the aspect ratio even if it leaves empty space.

I notice on the desktop you have the grid set to 100vh. The issue is on a desktop, you have a landscape style page but as you decrease it you go into a portrait style page (ex: cell phone). It's very difficult to have that same image fill the entire screen on desktop and then fit a cell phone the same way without cropping happening. I think in the breakpoints you need to switch the grid from 100vh to auto and add some padding to the grid.

It also looks like your video is set to a fixed size and doesn't scale based on the screen size. Another issue is you have text in your background image so its going to be more difficult to make sure all the text is on the screen at once. I would make the background only the 'mountains' and add the Vetty Films image and text to the grid itself as a text object.

[Ghardin]

Thanks for the feedback Crispy. I made the recommended changes but I just could not control the location of the video element. I switched all the breakpoints to contain and then I moved the video to its own Flex grid below the top picture. It isn't perfect but it's pretty darn close. Thanks again for your help!