New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video full screen with masthead and footer #933

Closed
silverHugh opened this Issue Apr 5, 2017 · 10 comments

Comments

Projects
None yet
3 participants
@silverHugh

silverHugh commented Apr 5, 2017

  • 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.
  • 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:
2017-04-05 18 18 09

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Apr 5, 2017

Owner

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

video

Owner

mmistakes commented Apr 5, 2017

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

video

@silverHugh

This comment has been minimized.

Show comment
Hide comment
@silverHugh

silverHugh Apr 5, 2017

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

silverHugh commented Apr 5, 2017

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

@silverHugh silverHugh closed this Apr 5, 2017

@silverHugh silverHugh reopened this Apr 5, 2017

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Apr 5, 2017

Owner

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.

Owner

mmistakes commented Apr 5, 2017

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.

@mmistakes mmistakes added the Type: Bug label Apr 5, 2017

@silverHugh

This comment has been minimized.

Show comment
Hide comment
@silverHugh

silverHugh Apr 5, 2017

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

silverHugh commented Apr 5, 2017

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

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Apr 5, 2017

Owner

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.

Owner

mmistakes commented Apr 5, 2017

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

This comment has been minimized.

Show comment
Hide comment
@silverHugh

silverHugh Apr 5, 2017

I get confused too. >_<

silverHugh commented Apr 5, 2017

I get confused too. >_<

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Apr 5, 2017

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

This should fix it for webkit browsers and Chrome.

Owner

mmistakes commented Apr 5, 2017

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

This should fix it for webkit browsers and Chrome.

@silverHugh

This comment has been minimized.

Show comment
Hide comment
@silverHugh

silverHugh Apr 5, 2017

Awesome! It works!

silverHugh commented Apr 5, 2017

Awesome! It works!

@mmistakes mmistakes closed this in b5a4496 Apr 5, 2017

RobinYu added a commit to RobinYu/robinyu.github.io that referenced this issue May 8, 2017

NicolasT added a commit to NicolasT/nicolast.github.io that referenced this issue May 30, 2017

Merge tag '4.4.1'
* tag '4.4.1': (33 commits)
  Release 💎 4.4.1
  Transition “hamburger” navicon on click to “X” navicon by adding `.close` to button - Close 969
  Add link to comment
  New comment. (mmistakes#968)
  New comment. (mmistakes#967)
  Update CHANGELOG and history
  Sync `/docs` with root changes
  Update ui-text.yml (mmistakes#958)
  fix(includes/video): use https always (mmistakes#945)
  Update history
  Release 💎 4.4.0
  Move SCSS partials to `/_sass/minimal-mistakes` for easier CSS customization
  Fixed link errors in docs (mmistakes#946)
  Add closing `}`
  Fix `.masthead` and `.page__footer` overlapping full screen video elements. - Close mmistakes#933
  Update CHANGELOG and history
  Add ProTip about installing unreleased version on `master`
  Replace modified with last_modified_at (mmistakes#930)
  Update CHANGELOG and history
  Add Lithuanian language/locale (mmistakes#924)
  ...

 Conflicts:
	.github/CONTRIBUTING.md
	.github/ISSUE_TEMPLATE.md
	CHANGELOG.md
	README.md
	docs/_data/navigation.yml
	docs/_data/ui-text.yml
	docs/_docs/01-quick-start-guide.md
	docs/_docs/02-structure.md
	docs/_docs/03-installation.md
	docs/_docs/04-upgrading.md
	docs/_docs/05-configuration.md
	docs/_docs/06-overriding-theme-defaults.md
	docs/_docs/07-navigation.md
	docs/_docs/08-ui-text.md
	docs/_docs/09-authors.md
	docs/_docs/10-layouts.md
	docs/_docs/11-posts.md
	docs/_docs/12-pages.md
	docs/_docs/13-collections.md
	docs/_docs/14-helpers.md
	docs/_docs/15-utility-classes.md
	docs/_docs/16-stylesheets.md
	docs/_docs/17-javascript.md
	docs/_docs/18-history.md
	docs/_docs/19-contributing.md
	docs/_docs/20-docs-2-2.md
	docs/_docs/21-license.md
	docs/_includes/video
	docs/_layouts/default.html
	docs/_layouts/single.html
	docs/_layouts/splash.html
	docs/_pages/about.md
	docs/_pages/home.md
	docs/_pages/terms.md
	docs/_posts/2010-01-07-post-modified.md
	docs/_posts/2012-03-15-layout-header-overlay-image.md
	docs/_posts/2013-08-16-markup-syntax-highlighting.md
	docs/_posts/2016-09-21-gemified-theme-alpha.md
	docs/_posts/2016-10-06-gemified-theme-beta.md
	docs/_sass/minimal-mistakes/_animations.scss
	docs/_sass/minimal-mistakes/_archive.scss
	docs/_sass/minimal-mistakes/_base.scss
	docs/_sass/minimal-mistakes/_buttons.scss
	docs/_sass/minimal-mistakes/_footer.scss
	docs/_sass/minimal-mistakes/_forms.scss
	docs/_sass/minimal-mistakes/_masthead.scss
	docs/_sass/minimal-mistakes/_mixins.scss
	docs/_sass/minimal-mistakes/_navigation.scss
	docs/_sass/minimal-mistakes/_notices.scss
	docs/_sass/minimal-mistakes/_page.scss
	docs/_sass/minimal-mistakes/_reset.scss
	docs/_sass/minimal-mistakes/_sidebar.scss
	docs/_sass/minimal-mistakes/_syntax.scss
	docs/_sass/minimal-mistakes/_tables.scss
	docs/_sass/minimal-mistakes/_utilities.scss
	docs/_sass/minimal-mistakes/_variables.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/_context.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/_helpers.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/_legacy-settings.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/_no-query.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/_parsers.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/_respond-to.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/_settings.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/parsers/_double.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/parsers/_query.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/parsers/_resolution.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/parsers/_single.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/parsers/_triple.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_default-pair.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_default.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_double-string.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/parsers/resolution/_resolution.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/parsers/single/_default.scss
	docs/_sass/minimal-mistakes/vendor/breakpoint/parsers/triple/_default.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_animated.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_bordered-pulled.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_core.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_fixed-width.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_font-awesome.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_icons.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_larger.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_list.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_mixins.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_path.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_rotated-flipped.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_screen-reader.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_stacked.scss
	docs/_sass/minimal-mistakes/vendor/font-awesome/_variables.scss
	docs/_sass/minimal-mistakes/vendor/magnific-popup/_magnific-popup.scss
	docs/_sass/minimal-mistakes/vendor/magnific-popup/_settings.scss
	docs/_sass/minimal-mistakes/vendor/susy/_su.scss
	docs/_sass/minimal-mistakes/vendor/susy/_susy.scss
	docs/_sass/minimal-mistakes/vendor/susy/_susyone.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/_su.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/_susy.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/_susyone.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_background.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_bleed.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_box-sizing.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_breakpoint-plugin.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_container.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_context.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_gallery.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_grids.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_gutters.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_isolate.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_margins.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_padding.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_rows.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_settings.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_span.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susy/_validation.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susyone/_background.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susyone/_functions.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susyone/_grid.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susyone/_isolation.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susyone/_margin.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susyone/_media.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susyone/_padding.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/language/susyone/_settings.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/_float.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/_shared.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/_support.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/float/_container.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/float/_end.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/float/_isolate.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/float/_span.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/shared/_background.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/shared/_container.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/shared/_direction.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/shared/_inspect.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/shared/_margins.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/shared/_output.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/shared/_padding.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/support/_background.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/support/_box-sizing.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/support/_clearfix.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/support/_prefix.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/support/_rem.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/output/support/_support.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/su/_grid.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/su/_settings.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/su/_utilities.scss
	docs/_sass/minimal-mistakes/vendor/susy/susy/su/_validation.scss
	docs/assets/css/main.scss
	docs/assets/js/main.min.js
	docs/assets/js/plugins/jquery.greedy-navigation.js
	minimal-mistakes-jekyll.gemspec
	test/_pages/terms.md
	test/_posts/2010-01-07-post-modified.md
	test/_posts/2012-03-15-layout-header-overlay-image.md
	test/_posts/2013-08-16-markup-syntax-highlighting.md
@lokowebdesign

This comment has been minimized.

Show comment
Hide comment
@lokowebdesign

lokowebdesign Jan 31, 2018

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?

lokowebdesign commented Jan 31, 2018

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Feb 1, 2018

Owner

@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.

Owner

mmistakes commented Feb 1, 2018

@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.

onqtam added a commit to onqtam/onqtam.github.io that referenced this issue Feb 13, 2018

antonizoon pushed a commit to antonizoon/antonizoon.github.io that referenced this issue Jul 27, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment