Edit video code to make section full with

[CharlesGlass]

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: 

<style>
video {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>

<video autoplay fullscreen muted loop playsinline>
<source src="https://cdn.shopify.com/videos/c/o/v/e6a075aad88e4368940fd76cf7b1d7e4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Best Regards 

[NomtechSolution]

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:

<div class="video-container">
  <video autoplay muted loop playsinline>
    <source src="https://cdn.shopify.com/videos/c/o/v/e6a075aad88e4368940fd76cf7b1d7e4.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

<style>
.video-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* Set the aspect ratio (e.g., 16:9) based on your video */
  position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

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.

[shreyhweb · Accepted solution]

@CharlesGlass 

 Hello,

Please add the below code above </body> in theme.liquid

online store >> edit code >> theme.liquid

<style>
@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;
}
}
</style>

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 🙂

[CharlesGlass]

That worked perfect! thank you very much for quick answer! 😀

[shreyhweb]

@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 🙂