将div容器适合视频大小（全屏） [英] Fit div container to video size (fullscreen as well)

问题描述

我想获得覆盖视频的文字，并根据其调整大小进行相应调整。

目前我的麻烦是使视频的容器相同

我的容器相对放置，我的视频和文字重叠式div都是绝对定位的：

HTML：

 < div id =container> 
< video id =videoPlayercontrols =true>< / video> 
< div id =videoCaption>< / div> 
< / div> 
  

CSS：

 code> #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; 
} 
  

这里有一个工作示例： https://jsfiddle.net/xw17xbc9/1/

容器没有高度（1904px x 0px），视频播放器为1280像素x 720像素，我的videoCaption div为205px x 16px（文字大小），位于播放器的左上角。

欢迎任何潜在客户。

我想要实现的结果基本上是一个有点像Youtube视频弹出窗口。

感谢

解决方案

我不知道我是否完全理解你的想法，但此更新的jsfiddle 会显示视频播放器的高度。

如果父元素 position：absolute ，父元素不会占用子代的高度。我制作了视频播放器元素 position：relative ，然后添加了 top：0px;

更新

p>

新jsfiddle 显示容器同时取得两个高度和子视频元素的宽度。

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

解决方案

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.

这篇关于将div容器适合视频大小（全屏）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！