Solved

Edit video code to make section full with

CharlesGlass
Tourist
22 0 1

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 

CharlesGlass_0-1684046197297.png

 

Accepted Solution (1)

shreyhweb
Shopify Partner
630 109 113

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

 

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com

View solution in original post

Replies 4 (4)

NomtechSolution
Astronaut
1245 113 148

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
Shopify Partner
630 109 113

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

 

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
CharlesGlass
Tourist
22 0 1

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

shreyhweb
Shopify Partner
630 109 113

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

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com