Solved

Why is a white border appearing on my Shopify background video?

JKIRK
Excursionist
55 0 7

Hi, 

How can I stop the white border from appearing on the background video section?

Example below.

Website image.jpg

Thanks 

Accepted Solution (1)
PaulNewton
Shopify Partner
6274 573 1319

This is an accepted solution.


@JKIRK wrote:

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!

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


View solution in original post

Replies 8 (8)

PaulNewton
Shopify Partner
6274 573 1319

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 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


JKIRK
Excursionist
55 0 7

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.

Screenshot 2021-10-04 at 3.43.52 PM.png

Screenshot 2021-10-04 at 3.44.23 PM.png

Thanks

PaulNewton
Shopify Partner
6274 573 1319

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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


JKIRK
Excursionist
55 0 7

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.

Screenshot 2021-10-04 at 4.03.13 PM.png

Sorry I am still new to Shopify.

Thanks

PaulNewton
Shopify Partner
6274 573 1319

@JKIRK wrote:

Sorry I am still new to Shopify.


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;
 }
}

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


JKIRK
Excursionist
55 0 7

Hi Paul, 

I have added the code and it has worked, thank you so much!

PaulNewton
Shopify Partner
6274 573 1319

This is an accepted solution.


@JKIRK wrote:

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!

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


PaulNewton
Shopify Partner
6274 573 1319

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 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org