Minimal-mistakes: Video full screen with masthead and footer

[silverHugh]

• [ ] This is a question about using the theme.
• [ ] This is a feature request.
• [ ] I have updated all gems with bundle update.
• [ ] I have tested locally with bundle exec jekyll build.
• [x] I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.

---

Environment informations

• Minimal Mistakes version: minimal-mistakes-jekyll 4.3.1
• github-pages or jekyll gem version: jekyll 3.4.3
• Operating system: macOS Sierra 10.12.4

---

Expected behavior

Is it normal to see "masthead" and "page_footer" when fullscreen a video?

Steps to reproduce the behavior

We can simply try it in this page: Post: Video (YouTube)

ScreenShot in my computer in full screen mode:

[mmistakes]

What's your browser? Looks fine to me in latest Chrome, FF, IE, and Safari.

[silverHugh]

Not like this. I mean play the video and double click to make the IFRAME FULL SCREEN. And then you will see what I say. I have tested it in Chrome and Safari on my mac and Chrome on Windows. They all show masthead and footer in full screen mode.
But I realized that the header video is normal. Layout: Header Video

[mmistakes]

I see what you mean. I'll have to look into a fix, not sure if I can do anything about it though.

What's going on is the header and footer elements are absolutely positioned with CSS so they overlap on top of the YouTube embed. Seems like a bug with YouTube's CSS. They would need to be absolutely positioned on top of the page.

Maybe I can override that, maybe not.

[silverHugh]

I also find the video tag can cause the same problem. Maybe it's not just youtube's CSS problem.

[mmistakes]

Looks like the browser applies these styles to the <iframe> when in fullscreen mode.

iframe:-webkit-full-screen {
    position: fixed;
    min-width: 0px;
    max-width: none;
    min-height: 0px;
    max-height: none;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    margin: 0px !important;
    padding: 0px !important;
    border-width: 0px !important;
    border-style: initial !important;
    border-color: initial !important;
    border-image: initial !important;
}
user agent stylesheet
:-webkit-full-screen {
    background-color: white;
    z-index: 2147483647;
}

Which with such a high z-index it should be placed on top of the masthead and footer who have a z-index of 20. But for whatever reason it's not.

Turning off z-index on those two elements fixes it, but breaks the rest of the site.

[silverHugh]

I get confused too. >_<

[mmistakes]

:-webkit-full-screen-ancestor .masthead,
:-webkit-full-screen-ancestor .page__footer {
  position: static;
}

This should fix it for webkit browsers and Chrome.

[silverHugh]

Awesome! It works!

[lanceolenik]

Hi all,

I'm having this same issue and the :-webkit-full-screen-ancestor fix isn't working for me. See http://www.biblechapel.org/about/leadership-programs/. It's only happening in Safari (Mac) when the full screen icon in the Vimeo video is clicked.

Any ideas why and how to fix?

[mmistakes]

@lokowebdesign For starters that site isn't even using the Minimal Mistakes theme 😝 .

Your problem is the #header container is appearing on top of it due to z-index order. Add something really high to .fluid-width-video-wrapper like z-index: 9999 and it'll fix the issue.

Safari's web developer tools are your friend. Just start inspecting elements and it becomes pretty clear what's going on if you check the CSS properties of the problematic elements.