Hero video and image and various devices

Question

I have literally spent hours trying to size my hero video to fit the computer screen for a wordpress page. Setting standard dimensions still seem to have it stretched. Now I am fighting with the hero poster image for mobile. Is there CSS that can be used to make the width of the image fit the width of the device? I am really at my wits end and would love some help!

Link to site: http://christap4.sg-host.com

Answer 1

From your link this is what I came up with.

body { margin: 0 } /* this is just for the snippet, ignore it */

<video id="wp-custom-header-video" autoplay="" loop="" playsinline="" src="http://christap4.sg-host.com/wp-content/uploads/2022/06/2AE-Hero-Video-20220616.mp4" style="width: 100vw;height: auto;opacity: 1;aspect-ratio: 1.77777778;"></video>

To get 100% of the screen width you can use width: 100vw (vw = viewport width). I've also included ascpect-ratio: 1.77777778 (video width / video height) and then set the height to auto

Answer 2

Looks like there are a couple of things here.

Looking at your output it looks like you have over-complicated the solution. Anything that is position absolute with 100% width will be as wide as it's most relative parent (by default the body).

If you set the width to 100% you can set the height using aspect-ratio ( https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio ). I'm not sure how far back you are going in browser support but this will cover most uses.

Alternatively you can give it a fixed height and use object-fit cover but this will cause some cropping.

The poster image will just inherit the same dimensions as the video. That being said short videos can now autoplay providing they are the right format, muted and have the right attributes set on them.