Hi,
How can I stop the white border from appearing on the background video section?
Example below.
Thanks
Provide better detail a screenshot by itself is less than useless for troubleshooting issues like this.
https://community.shopify.com/c/shopify-design/help-us-help-you/m-p/668159#M166563
Hi Paul,
The shop link is https://fr.apm.mc/
The theme is Prestige.
It is the background section part that is the problem, here is the section code.
Thanks
If this is a custom content block validate the html that’s being added https://validator.w3.org/#validate_by_input
Then validate the entire page https://validator.w3.org/
Often the problem is there is inner content that is bigger than the container.
Often solved with a combination of overflow:none; , margin-top:0; , padding-top:0; etc on the containing element or relevant wrapper.
Or it’s messing with the sticky header.
Hi Paul,
Thanks for the reply, overflow is hidden and there’s no margin or padding. It only shows the white border in certain sizes when I adjust the window size.
Sorry I am still new to Shopify.
Thanks
No problem though this is more of a CSS,HTML, Javascript and vimeo issue.
There’s some sort of weird jog issue, I think iframe being dynamically positioned and the video large dimensions and aspect ratio , and maybe still the announcement bar or sticky header.
The iframe isn’t being offset properly.
A sloppy bandaid quick fix is to try and negative the top margin, but it’s a magic number in the below it’s -174 for a 635px height viewport on this laptop
@media screen and (min-width: 1140px) {
.ImageHero--large {
min-height: 850px;
margin-top: -174px;
}
}
Hi Paul,
I have added the code and it has worked, thank you so much!
No problem please like and accept the quick solution , though lets keep in mind this is a bandaid and to solve the underlying problem you’d probably need to put that iframe into a blank layout and go through devtools trying to find what cause that jog|row|height issue.
Great layout btw and video, though note a 2 minute 4k autoplay video is very unfriendly to batteries so please consider a pause button.
If you ever a/b test the video used while the model is pretty those dynamic orbiting light shots of jewelry on the rocks are much hotter.
Goodluck!
Future designers and developers see the below starting doc to support media directly in a theme from content added to the shopify admin instead or an external source
https://shopify.dev/themes/product-merchandising/media/support-media