フルスクリーンビデオの上に表示されるポリマースターターキットのアプリ引き出しとアプリヘッダー

Question

私はポリマースターターキットを使用しており、私のページの1つに<google-youtube>要素のYouTubeビデオをいくつか掲載しました。フルスクリーンモードでビデオを見るためにクリックすると、側面app-drawerとトップapp-headerはビデオを持続してカバーします。引き出しやヘッダーを隠すにはどうすればいいですか？

app-drawer用法：

<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用法：

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

スクリーンショット：

Answer 1

ポリマースターターキットのルートレイアウト要素、app-drawer-layout、が含まれていますおよびapp-headerであり、どちらも独自のstacking context's with a positive z-indexを持っています。<iron-pages>子よりも上位のもので、おそらく<google-youtube>要素を含んでいます。 <google-youtube>はヘッダーと引き出しよりも低いスタッキングコンテクストなので、ビデオのz-indexだけでは前面に移動することはできません。補償する

、あなたはフルスクリーン時に<google-youtube>の内側のビデオは彼らの上にスタックすることができ、負z-indexにapp-headerとapp-drawerを移動するには、次のCSSを使用することができます。 :-webkit-full-screen-ancestor擬似クラスは、フルスクリーン要素の全ての祖先に適用される

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

注意（これはMacOSのシエラのChrome 56、Firefoxの50、およびSafari 10で試験した）（すなわち、<google-youtube>のvideo要素）、フルスクリーンを終了すると自動的に削除されます。このWebKit擬似クラスには現在、私が見つけることのできるドキュメントはありません。 :-webkit-full-screen-ancestorはまだそこで動作していますが、Gecko相当（:-moz-full-screen-ancestor）はFirefox 50から削除されています。