如何制作< video>< / video>标记在div中心没有视频流露？ [英] how to make <video></video> tag in div center without video outpouring?
问题描述
div.video_div {width：800px;高度：300像素;边框：1px纯红色;背景色：蓝色; margin：0 auto;} video {width：100％;高度：100％; object-fit：cover;}
<！DOCTYPE html> ;< html>< head>< title> video< / title>< link rel =stylesheettype =text / csshref =style.css>< / head>< body> ;< div class =video_div>< video controls autoplay loop muted>< source src =movie.mp4type =video / mp4>< source src =movie.oggtype = < / div>< / html>< / code>< / pre>您的浏览器不支持视频标签< / video><
尝试添加规则overflow：hidden;您的div.video_div规则：
div.video_div {
width：800px;
height：300px;
border：1px纯红色;
background-color：blue;
margin：0 auto;
overflow：hidden; / *添加* /
}
视频{
width：100％;
身高：100％;
/ *如果您希望对象适合而不裁剪* /
object-fit：cover;
}
object-fit：cover属性将缩放视频，保留方面。这可能会让它的一部分溢出边界。溢出：在周围的div上隐藏的CSS隐藏了这个溢出。您可能还想使用object-fit：contains代替，这将保留宽高比，但使视频完全适合框内。 （您可以查看 https://developer.mozilla.org / zh-CN / docs / Web / CSS / object-fit 查看各种值。）
使用工作视频源的示例jsfiddle：
https://jsfiddle.net/gmg43wb2/
it centered my video and placed controls in divs bottom but video outpouring . and in css style sheet it looks like css does not recognizing. cos color is black in stylesheet. i use chrome .
div.video_div{
width:800px;
height:300px;
border:1px solid red;
background-color:blue;
margin:0 auto;
}
video{
width:100%;
height:100%;
object-fit:cover;
}
<!DOCTYPE html>
<html>
<head>
<title>video</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="video_div">
<video controls autoplay loop muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
Try adding the rule overflow: hidden; to your div.video_div rule:
div.video_div{
width:800px;
height:300px;
border:1px solid red;
background-color:blue;
margin:0 auto;
overflow: hidden; /* Add this */
}
video{
width:100%;
height:100%;
/* Use contain instead if you want the object to fit without cropping */
object-fit: cover;
}
The object-fit: cover attribute will scale the video, preserving aspect. This can leave part of it overflowing over the boundaries. The overflow: hidden CSS on the surrounding div hides this overflow. You might also want to use object-fit: contain instead, which will preserve aspect ratio, but make the video completely fit inside the box. (You can check out https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit to see the various values.)
Example jsfiddle with a working video source: https://jsfiddle.net/gmg43wb2/
这篇关于如何制作< video>< / video>标记在div中心没有视频流露？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
