Polymer Starter Kit app-drawer & app-header showing on top of fullscreen video

Question

I am using Polymer Starter Kit, and I have included a few YouTube videos in one of my pages with <google-youtube> elements. When I click to view a video in fullscreen mode, the side app-drawer and top app-header persist and cover the video. How do I hide the drawer and header?

app-drawer usage:

<app-drawer paper-drawer-toggle class="appDrawer" id="menu" on-tap="closeMenu">
  <div class="appDrawerBackground">
    <app-toolbar class="appDrawer">Menu</app-toolbar>
    <hr class="menuLine">
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a class="homeMargin" name="home" href="/home">Biography</a>
      <hr>
      <a name="view1" href="/acting">Acting</a>
      <hr>
      <a name="view2" href="/produce">Directing / Producing</a>
      <hr>
      <a name="view3" href="/contact">Contact</a>
    </iron-selector>
  </div>
</app-drawer>

app-header usage:

<app-header condenses reveals effects="waterfall">
  <app-toolbar>
    <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
    <div title>
      <img class="headerImg" src="/images/toolbar-logo.png">
    </div>
  </app-toolbar>
</app-header>

Screenshot:

Answer 1

Polymer Starter Kit's root layout element, app-drawer-layout, contains the app-drawer and the app-header, both of which have their own stacking context's with a positive z-index -- one that is higher than the <iron-pages> child, which presumably contains the <google-youtube> element. Since <google-youtube> is in a lower stacking context than the header and drawer, the video's z-index alone won't be able to move it to the front.

To compensate, you could use the following CSS to move the app-header and app-drawer to a negative z-index, allowing <google-youtube>'s inner video to stack above them when fullscreen. (This was tested on Chrome 56, Firefox 50, and Safari 10 on macOS Sierra)

app-drawer-layout:-webkit-full-screen-ancestor app-header,
app-drawer-layout:-webkit-full-screen-ancestor app-drawer {
  z-index: -1 !important;
}

Note the :-webkit-full-screen-ancestor pseudo-class is applied to all ancestors of the fullscreen element (i.e., <google-youtube>'s video element) and is automatically removed when exiting fullscreen. This WebKit pseudo-class currently has no documentation that I could find. Note the Gecko equivalent (:-moz-full-screen-ancestor) was removed from Firefox 50, although :-webkit-full-screen-ancestor still works there.