Change video width and keep height of video - custom liquid section

[jasondane]

Hello,

I'm working on a video using custom liquid section. I can't find the right code to crop the video to have the full width but keep the height to 50%. Here's the existing code.

<style>
video {
width: 50%;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
    <source src="https://cdn.shopify.com/videos/c/o/v/c42e8f5687394871a216754e12835320.mp4"
                  type="video/webm">
    <source src="https://cdn.shopify.com/videos/c/o/v/c42e8f5687394871a216754e12835320.mp4"
                  type="video/mp4">
</video>

I want to expand the video to full width and keep the current height.

Site: https://www.designfruit.com.au/

Can anyone please help?

[Dan-From-Ryviu · Accepted solution]

Hi @jasondane 

You can update your code to this version below, but your video will be cropped also.

<style>
video {
    width: 100%;
    display: block;
    margin: 0 auto;
    max-height: 464px;
    object-fit: cover;
}
</style>
<video muted autoplay playsinline loop>
    <source src="https://cdn.shopify.com/videos/c/o/v/c42e8f5687394871a216754e12835320.mp4"
                  type="video/webm">
    <source src="https://cdn.shopify.com/videos/c/o/v/c42e8f5687394871a216754e12835320.mp4"
                  type="video/mp4">
</video>

[jasondane]

Wonderful! Thank you!