Borykam sie z problemem, ktory dotyczy playera HTML5 w trybie pelnoekranowym. Na skutek pozycjonowania absolutnego i relatywnego pewnych elementow layoutu, odtwarzane w playerze filmy na pelnym ekranie wysywietlaja sie pod warstwami z menu itd.
Nipeozadany efekt mozna zobaczyc w przegladarce Chrome, Opera pod adresem: http://filmland.com.pl/oferta/realizacje-video
Dodanie z-index nie zdaje egzaminu.
Kod playera umieszczonego na stronie:
<div class="row"> <div class="col-md-8 col-md-offset-3 col-sm-offset-1"> <video id="video201492162445" class="img img-responsive" width="560" height="315" poster="https://dysk.onet.pl/api/manager/?thumbnail&link=J9c5Q&id=1e3a1465e21594a351b63a8607f420bc&size=F" controls="controls"> <source type="video/mp4" src="https://dysk.onet.pl/file_download/6i4rP"></source> </video> </div> </div>
Elementy layoutu umieszczone w topie strony maja m.in. takie oto style:
#pre-showcase-divider { padding-bottom: 29px; position: relative; z-index: 505; } #pre-showcase{background:#e7e7e7 url(/images/bcg/module-bcg.jpg) no-repeat scroll center center;padding-bottom:179px;position:relative;z-index:504} #pre-showcase:before{content:"";position:absolute;z-index:504;top:-118px;left:0;width:100%;height:98px;background:url(/images/bcg/main-slider-mask-3.png) no-repeat scroll center top} #pre-showcase-subpage{background:#242424 url(/images/bcg/subpage-bcg.jpg) no-repeat scroll center center;padding-bottom:179px;position:relative;z-index:505}
Jakies sugestie, w jaki sposob to naprawic?