3

I have a video element over which a div element lies. In this div are overlay elements, which should lie at certain positions of the video (pixel distances from top and left).

    <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>

If the video is displayed in fullscreen, the overlay elements are not visible anymore (as expected). This is because the fullscreen event is triggered only for the video element, but not for the overlay elements.

Question 1: How can I realize that the fullscreen also displays the overlay elements?

I found a stackoverflow post here, how the event can be triggered. however, only the video element is displayed in fullscreen.

Question 2: Due to the fact that the positions are given by pixel distances, the elements probably have to be scaled. Is there a built-in function for scaling or does it have to be implemented via javascript?

carapaece
  • 331
  • 4
  • 15
  • 1
    For scaling you can use css scale, for example: `scale: 1.5;` – Itay Gal Nov 27 '18 at 09:42
  • Surely you cannot do 1 as when a video goes full screen, it sits on top of everything including the browser – Pete Nov 27 '18 at 09:43
  • thanks, I see what you mean. but would it be possible to set the whole video container in fullscreen, instead of only the video element? – carapaece Nov 27 '18 at 09:44
  • Can you make that overlay absolute and the video relative ? Than give it the distance in pixels where you want it to be . You can also use % instead. I think this should work. – Bojan Kolano Nov 27 '18 at 09:46
  • 1
    you could intercept the button click with js and make your browser go fuill screen and then use fixed position on your container div to make that fill the browser and then resize the video to fit – Pete Nov 27 '18 at 09:46
  • 2
    also check this out https://www.w3schools.com/howto/howto_css_fullscreen_video.asp – Bojan Kolano Nov 27 '18 at 09:47
  • Or have a look at this: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API not sure how widely supported it is though - it suggests you can use it on a div: https://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen – Pete Nov 27 '18 at 09:49

0 Answers0