我有一个视频元素，上面有一个div元素。
div中的叠加层元素应位于视频的某些位置（距顶部和左侧的像素距离）。
<div id="videocontainer" class="videocontainer">
<video id="video" controls>
<source src="video.mp4" type="video/mp4">
</video>
<div class="overlay">
<div class="overlay-item" style="top:100px;left:100px;">TEXT</div>
</div>
</div>
如果视频以全屏显示，则重叠元素不再可见（如预期）。这是因为全屏事件仅针对视频元素而不是重叠元素触发。
问题1：我如何认识到全屏还显示叠加层元素？
我发现了here上的stackoverflow帖子，说明如何触发事件。但是，只有视频元素会以全屏显示。
问题2：由于位置是由像素距离指定的，因此可能必须缩放元素。是否有内置的缩放功能或必须通过javascript实现？