Solved

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

jasondane
Excursionist
36 0 11

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.

jasondane_0-1714614344870.png

 

 

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

 

Can anyone please help?

 

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7726 1506 1513

This is an 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>

Screenshot 2024-05-02 at 10.59.11.png

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
7726 1506 1513

This is an 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>

Screenshot 2024-05-02 at 10.59.11.png

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

jasondane
Excursionist
36 0 11

Wonderful! Thank you!