Есть тег 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).