Fit div container to video size (fullscreen as well)

Question

I'm trying to get a text overlaying a video and behave accordingly to its resizing.

Currently my trouble is to make the container of the video at the same size as the player (as well as in fullscreen mode).

My container is positioned relatively and both my video and text overlay div are positioned absolutely:

HTML:

<div id="container">
        <video id="videoPlayer" controls="true"></video>
        <div id="videoCaption"></div>
</div>

CSS:

#container {
position: relative;
}

#videoPlayer{
position: absolute;
z-index: -1;
}

#videoCaption{
position: absolute;
z-index: 2147483647;
font-size: 80%;
line-height: 125%;
text-align: left;
color: #c9302c;
background-color: #000000;
font-weight: normal;
text-decoration: none;
font-family: "monospaceSansSerif";
}

Here a working example: https://jsfiddle.net/xw17xbc9/1/

Container has no height (1904px x 0px), video player is 1280px x 720px and my videoCaption div is 205px x 16px (size that take the text), stuck ar the top-left corner of the player.

Well, basically the result I'd like to achieve is a little bit like the Youtube videos pop-ups overlaying.

Any lead is welcome.

Thanks

Answer 1

I'm not sure if I understand completely what you are trying to do, but this updated jsfiddle shows the video container taking the height of the video player.

Parent elements won't take on the height of their children if they are position:absolute. I made the video player element position:relative, then added top:0px; left:0px; to place the text container back in the top left of the container.

Update

New jsfiddle showing container taking both height and width of the child video element.