Set video background poster image size to Cover

[marketfresh]

Is there a way to set the video background poster image size to “cover”?

[Prasant]

Hello Jonathan,

Thanks for writing in!

Please take a look at the solution shared in following resources.

simulate background-size:cover on <video> or <img>

Thanks.

[marketfresh]

I ended up doing this and it kinda works:
video {
background: url(image.jpg) no-repeat;
background-size: cover;
}

Would be great if there was an easier solution to this problem in the editor.

[nabeel]

Hey Jonathan,

The background video poster image is set to cover by default so you don’t need to add any extra CSS to do that. Here’s the code already added in the theme:

.x-video.bg.poster, .x-video.x-video-bg.poster {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

You can adjust the above code if needed. Hope this helps!