Limit images/video to the width of the header?

[AZColin]

alienzero.bike

On the main page the image banner stretches the entire length of the viewport.

I'm trying to implement one of the many video banner options and one of the issues I have is that the video also stretches the entire width of the viewport which means, under many or most circumstances, the video takes over the entire browser.

How do I limit the width on these sections?

For the video, the best, but still terrible implementation, has been a simple custom liquid section with an iframe but it also fills the entire viewport. I've gotten the YouTube video to stay a specific size, which is less than ideal, but it will not center within the container or viewport. And, of course, on mobile it doesn't resize.

Thoughts on a video carousel option that doesn't consume 100% of the viewport, autoplays, is not muted, and scales properly?

I don't think I can give you a link to the video option I have as it's in a duplicate Dawn theme that is not live. If I can, let me know...

[TheScriptFlow]

Even if you on the Duplicate theme still you can share the preview link.

Here is how you can do this.

Go to Shopify Admin > Click on Online Store > Click on the three dots on the theme wherte you work > Preview > When you preview on the bottom you will see the preview link.

Just click on it to copy.

After that share it with me I will take a look and provide you solution code.

Thanks 

[AZColin]

https://v3z1ynccflsin6wh-89718587761.shopifypreview.com

That's where I left off...

The top version is a custom liquid with a fixed size and doesn't scale.

The second is a simple video block. If it didn't consume the entire screen and I didn't have to hit play TWICE it would be good.

The third is a hack I found on YouTube. It also consumes the entire screen but it doesn't have any sound. Well, scratch that... I just found the "muted" variable in the video-banner.liquid file. It also appears that it is no longer autoplaying and since there are no controls with that hack, it won't play. According to the popup I see, it may not autoplay in chrome without MUTED being on. Wonderful.

Let me know what you think...

[AZColin]

Bumping this... I updated the temporary preview link:

https://7x00hydycuxi94to-89718587761.shopifypreview.com

[AZColin]

I know that's what I need to do but I find using a CMS makes it painfully difficult to find the objects I need to edit and then find where I need to apply fixes to it. There are hundreds of CSS files and it seems when I look I see several .liquid files that COULD be what I'm looking for.

[AZColin]

Still struggling with this. I somehow managed to come up with an OK solution.

https://hv4aljbdfmwt4ite-89718587761.shopifypreview.com

The only problem now it the video doesn't autoplay. That's a dealbreaker. And, I'm aware of a possible Chrome limitation of not autoplaying unless the video is on mute. That's a heavy duty load of crap but I think we can live with no sound as long as it autoplays.

Suggestions?