Vimeo and YouTube Fancyboxes inserting inline 160px top offset

Very strange. I’ve never seen that happen. And the offset disappears when the video has ended… Does it happen with that particular WordPress theme?

I copied your example to https://demo.status301.net/ where it appears to work just fine.

Do you have any idea where that offset is coming from? It’s not Easy FancyBox that does that.

If it’s the theme or another plugin, then I’m stunned because it should not be possible to apply any style rules to elements inside an iframe with content from another domain (youtube). That would effectively mean cross site scripting… cross site styling at least…

I don’t set an offset of that size any where in the CSS for the live site. This is all I have:

.post-6167 .post__contact-item–phone::before {
content: ‘\f095’;
top:2px !important;
margin-right:6px !important;
}
.lsvr_event-post-single .post__addressmap::before {
top:2%;
left:86%;
}

I tried removing both of these styles and it didn’t remove the top offset but when I switched the dev site from using the child theme to the parent theme, it worked just fine. This led me to try removing chunks of the CSS to see if I could narrow down what is causing the offset and it appears the min-height in this style is the culprit:

iframe {
overflow: scroll;
width: 99%;
height: 100%;
min-height:800px;
border: 0px;
}

I added that style to control the height of the Google map on the Contact page so I pulled it out and made it class-specific to the map div and voila, the video now load without the offset (https://bigskytown.staging.wpengine.com/farmers-market)!

Excellent deduction, dear Watson. Seriously: Good spot!

I suspect it’s the “min-height:800px;” part in particular. It apparently causes a Youtube script to try to vertically center the video, thinking the iframe view port is higher than it actually is, pushing it partly out of view.

Very wise to make those styles more specific to the map div.

Can I mark this as resolved then?