Набор для начинающих с программным обеспечением и планшета с надписью сверху полноэкранного видео

Question

Я использую комплект Polymer Starter Kit, и я включил несколько видеороликов YouTube на одной из моих страниц с элементами <google-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

корневой элемент макета полимера Starter Kit, в app-drawer-layout, содержит app-drawer и app-header, оба из которых имеют свой собственный stacking context's with a positive z-index - тот, который выше, чем у ребенка <iron-pages>, который предположительно содержит элемент <google-youtube>. Поскольку <google-youtube> находится в более низком контексте стекирования, чем заголовок и ящик, только z-index видео не сможет переместить его на передний план.

Чтобы компенсировать это, вы можете использовать следующий CSS для перемещения app-header и app-drawer к отрицательным z-index, позволяя <google-youtube> «s внутреннего видео складывает над ними, когда всем экраном. (Это было проверено на Chrome 56, Firefox 50, и Safari 10 на MacOS Sierra)

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

Обратите внимание на :-webkit-full-screen-ancestor псевдо-классе применяется ко всем предкам полноэкранного элемента (то есть, видео элемент <google-youtube> «ы) и автоматически удаляется при выходе из полноэкранного режима. В этом псевдоклассе WebKit нет документации, которую я мог бы найти. Обратите внимание, что эквивалент Gecko (:-moz-full-screen-ancestor) был удален из Firefox 50, хотя :-webkit-full-screen-ancestor все еще работает там.