Shopify Question posted in
The Shopify help center can be found here.

How to make the width of this video 100% responsive? – Shopify

I’m creating a Shopify website and I want to show a hero video on the top. But the video is somehow leaning to the right, leaving a blank on the left. Anyone knows how I can make it 100% responsive? I don’t know much about coding and I did everything I could… any help is appreciated.

Spent three days searching but in vain…

My website is here: https://v3xt5u4y7es2qbjl-22601531467.shopifypreview.com

The video on the top currently is not exactly what I want. I actually just want to keep the second video.

HTML

<div id="hero_video">
<video autoplay="" playsinline="" muted="" loop="" id="Hero_Video">
  <source src="https://cdn.shopify.com/s/files/1/0226/0153/1467/files/background_video_1.mp4?1009" type="video/mp4">
</video>
</div>

CSS

#Hero_Video {
  position: relative;
  width: 100vw;
  max-height: 100%;
}

/* Hero Video Style*/
.hero_video{
    left: 50%;
    margin-left: -200vw;
    margin-right: -50vw;
    max-width: 100vw;
    position: relative;
    right: 50%;
    width: 100vw;
}
Tags:

2

Answers


  1. 0

    add width 100% to your video and it should work

    #Hero_Video {
    width: 100%;
}
    Login or Signup to reply.
  2. 0 
        #Hero_Video {
      position: relative;
      ....
    }

    /* Hero Video Style*/
    .hero_video{
        left: 50%;
        ...
        width: 100vw;
    }

    > <div id="hero_video"> <video autoplay="" playsinline="" muted=""
> loop="" id="Hero_Video">

    “.” is for class and “#” is for id. Firstly, I think that your css have a problem here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search