Video Background Scaling

josephusmith

Howdy! love this theme. This is my 7th or 8th license!

I am working on a new site: https://ziontempletyler.org/ with a background image for the hero image. When i view this from a responsive perspective on tablet or mobile, i am unable to make the image scale and remain centered. I have a solid example of the code, but i do not see where i can set an ID on the video tag.

Here is the example outcome i am looking for:

https://codepen.io/zaggamok/pen/YJoXNK?editors=1101

Any help is appreciated.

josephusmith

I kept tinkering and found a solution. Native support within betheme would greatly help though as there are no options to add CSS specifically to the video tag. I ended up adding css to the page, but would consequently impact any other video might add to the page.

To the custom CSS for the page I added:

video {

width: 100%;

 height: auto;

object-fit: cover;

}

object fit in particular added options to get the desired look i was after.

More info here:

https://www.w3schools.com/css/css3_object-fit.asp

Phil

Hi,

We are aware of that, and improving this is on our to-do list, so it will be added to the feature updates.

Anyway, I am happy to see that you have found the solution.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next