Есть тег video. Есть ещё один тег (картинка, но не суть важно). Он должен быть поверх видео в определённом месте. В обычном режиме я поставил контейнер-div сверху, в него положил video и картинку. У контейнера поставил position: relative и display: inline-block. У картинки position: absolute и остальное как надо. В итоге контейнер растягивается ровнёхонько по размерам видео и картинка в контейнере позиционируется как положено.
Вот иллюстрация:
<div id=container>
<div id=video></div>
<div id=overlay></div>
</div>
#video {
background: red;
width: 100px;
height: 100px;
}
#container {
display: inline-block;
position: relative;
}
#overlay {
position: absolute;
background: green;
width: 30%;
height: 30%;
left: 35%;
top: 35%;
}
Получается такой рендер (что и нужно):
Теперь если нажать кнопку фуллскрин, то элемент video растягиваетяся на весь экран; контейнер схлопывается в 0 и, соответственно, оверлей тоже в 0. Внимание вопрос: можно ли минимальными усилиями решить эту проблему? Как я понял, при нажатии фуллскрин браузер проставляет элементу видео position:fixed (но не уверен, что это универсально).
Сымитировать можно так:
#video.fullscreen {
position: fixed;
}
(ну и проставить в HTML этому диву class=fixed).
В общем пока сделал мониторинг фулл-скрин через событие webkitfullscreenchange и вычисляю через window.getComputedStyle(video).position. Теоретически должно работать в плане позиционирования, но практически video перекрывает всё. Ещё и актуальный размер видео не обязательно соответствует размеру тега video.
Походу только тот элемент, который запросил фул-скрин, может показываться сверху. В общем похоже, что правильный вариант — отключать кнопку фулл-скрина у видео, делать свою кнопку, ставить фулл-скрин элементу-контейнеру и растягивать видео на этот элемент-контейнер. Тогда что внутри него, включая оверлей, показывается как положено. Намудрили, блин, а достаточно было бы просто разрешить элементы внутрь video класть.