Fit div container to video size (fullscreen as well)

问题

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

回答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.

回答2:

Basically, you want a full screen video, if i understand correctly.

Here is the fullscreen demo and here it is the live code.

Use the JS to adapt the video: it will depend on its ratio and the window ratio. Below the snippet of code. See the JSBIN to test it:

function(){

        wWidth = $(window).width();
        wHeight = $(window).height();

        if (wWidth / s.ratio < wHeight) { // if new video height < window height (gap underneath)
            pWidth = Math.ceil(wHeight * s.ratio); // get new player width
            $(s.playerId).width(pWidth).height(wHeight).css({left: (wWidth - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
        } else { // new video width < window width (gap to right)
            pHeight = Math.ceil(wWidth / s.ratio); // get new player height
            $(s.playerId).width(wWidth).height(pHeight).css({left: 0, top: (wHeight - pHeight) / 2}); // player height is greater, offset top; reset left
        }
 };

Edit your video ratio in the function settings:

"ratio"         : 16/9

来源：https://stackoverflow.com/questions/29650776/fit-div-container-to-video-size-fullscreen-as-well

标签

html

css

video

html5-video

overlay