Edit video code to make section full with

Hello, I have a custom liquid section in my theme where I have a code that displays a video from shopify files. The video is not full with as my other images etc so I would very much like to fix this, it is probably very easy for someone who knows how to code. I will attach a screenprint from my mobile with the video so you guys can see what I mean. 95% of my customers come from smartphone so thats the most important.

Store URL(video is down on my homepage) : https://clouders-online.com/password
Store password: 123mnb

The code I use:

video { width: 100%; height: 100%; object-fit: fill; }

Best Regards

To help you with this issue, I can provide you with general guidance and recommendations based on the code you shared:

  1. Remove the fullscreen attribute: The fullscreen attribute is not a valid attribute for the <video> tag. You can remove it from the code.

  2. Update the CSS: The CSS code you provided should make the video fill its container, but it’s important to ensure that the container itself has the appropriate dimensions and is set to full width. Here’s an example of how you can modify the code:


  

In this code, a container div with the class video-container is created to wrap the video element. The container is set to full width and maintains its aspect ratio using the padding-bottom property. The video is then absolutely positioned within the container and set to cover the entire area.

@CharlesGlass

Hello,

Please add the below code above in theme.liquid

online store >> edit code >> theme.liquid

@media screen and (max-width: 767px) { section#shopify-section-template--18899455869253__2bb956f3-51b8-425a-a097-14a5965803a6 .page-width { padding-left: 0!important; padding-right: 0!important; } }

after added the given code dropdown looks like this.

If our solution is helpful for you then Please like the post and tap on accepted.

If you want to discuss any further information then please contact us on our whatsapp.

We will always here for your help.

Thankyou :slightly_smiling_face:

That worked perfect! thank you very much for quick answer! :grinning_face:

@CharlesGlass

Our pleasure.

We always here to help you.

if you want to discuss any further information related with shopify then you can contacts us on our official whatsapp.

Thankyou :slightly_smiling_face: