是否有人能够成功将video元素调整为父div？
我的视频元素包含带有ratio of 4:3的网络摄像头流。我想打破比率并将其调整为div大小。我尝试了以下内容：
width and height 100%＆gt;这没有做任何事情，4：3仍然是min-height and min-width 100%＆gt;这使得视频大小调整为溢出div的东西。position:absolute, bottom, top, left and right: 0px也是父div的巨大流量怎么做？
编辑：感谢Gaurav的详细回复。看起来不错，我希望它对我有用。
.parentDiv // Results in around 400x400 pixels for me
{
position: absolute;
top: 11px;
right: 10px;
left: 10px;
height: -webkit-calc(50% - 18px);
height: calc(50% - 18px);
display: block;
}
我的视频元素在那里，我给了你的CSS解决方案。不幸的是它只变白了。我的parentDiv css可以与此有关吗？
编辑2 ：这是HTML：
<div class="parentDiv">
<video class="cam_video" autoplay></video>
</div>
这主要是它。视频的src属性设置为我的网络摄像头流。
编辑3 ：
如果我右键单击并检查此屏幕截图https://s22.postimg.cc/th4ha8nmp/ratio2.png中的白色（现为红色潦草）部分，Chrome会向我显示白色也属于流。
似乎网络摄像头的流在顶部和底部都带有白色条纹。这太烦人了。
答案 0 :(得分：24)
1）仅限CSS
的 Demo
HTML
<div class="wrapper">
<video class="videoInsert">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
CSS
.videoInsert {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
}
2）jQuery
的 Demo
HTML
<div id="video-viewport">
<video autoplay preload width="640" height="360">
<source src="https://s3.amazonaws.com/whiteboard.is/videos/bg-loop-new.mp4" />
</video>
</div>
CSS
#video-viewport {
position: absolute;
top: 0;
left:0;
overflow: hidden;
z-index: -1; /* for accessing the video by click */
}
body{
margin:0;
}
jquery的
来自这个答案 - simulate background-size:cover on <video> or <img>
var min_w = 300; // minimum video width allowed var vid_w_orig; // original video dimensions var vid_h_orig; jQuery(function() { // runs after DOM has loaded vid_w_orig = parseInt(jQuery('video').attr('width')); vid_h_orig = parseInt(jQuery('video').attr('height')); $('#debug').append("<p>DOM loaded</p>"); jQuery(window).resize(function () { resizeToCover(); }); jQuery(window).trigger('resize'); }); function resizeToCover() { // set the video viewport to the window size jQuery('#video-viewport').width(jQuery(window).width()); jQuery('#video-viewport').height(jQuery(window).height()); // use largest scale factor of horizontal/vertical var scale_h = jQuery(window).width() / vid_w_orig; var scale_v = jQuery(window).height() / vid_h_orig; var scale = scale_h > scale_v ? scale_h : scale_v; // don't allow scaled width < minimum video width if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;}; // now scale the video jQuery('video').width(scale * vid_w_orig); jQuery('video').height(scale * vid_h_orig); // and center it by scrolling the video viewport jQuery('#video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width()) / 2); jQuery('#video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height()) / 2); };
3）仅使用iframe css
的 Demo
HTML
<div class="wrapper">
<div class="h_iframe">
<iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
.h_iframe iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
答案 1 :(得分：7)
您可以使用object-fit属性来解决此问题。 HTML：
<div class="parentDiv">
<video class="cam_video" autoplay></video>
</div>
CSS：
.cam_video {
object-fit: fill;
}
这会使视频拉伸占据整个父div。
答案 2 :(得分：1)
object-fit: cover;
这对我有用。
答案 3 :(得分：1)
这是使视频标签 可拖动和可调整大小的技巧，虽然它并不完美，但您可以对其进行改进
->在github原始链接（ https://github.com/umairabbasDev/draggable-resizable ）上。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>draggable & resizable</title>
<link
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background: #fffd95;
color: #0f0f0f;
font-weight: bold;
}
.ui-widget-content {
background:transparent;
color: #333333;
}
#resizable-3 {
max-width: 1000px;
max-height: 800px;
/* padding: 0.5em; */
text-align: center;
margin: 0;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
display: inline-block;
vertical-align: middle;
}
</style>
<!-- Javascript -->
<script>
$(function () {
$("#content").resizable({
ghost: true,
});
$( "#content" ).draggable();
});
</script>
</head>
<body>
<!-- HTML -->
<div id="content" class="ui-widget-content">
<video class="ui-widget-header" controls muted autoplay loop>
<source
src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
type="video/webm"
/>
<source
src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
type="video/mp4"
/>
<source
src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
type="video/ogg"
/>
Your browser doesn't support HTML5 video tag.
</video>
</div>
</body>
</html>
答案 4 :(得分：0)
我的回答来自4dgaurav和Umair Muhammad Abbas的回答。
HTML
<div class="wrapper">
<video class="videoInsert">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
CSS
.videoInsert {
width: 100%;
height: 100%;
object-fit: contain;
display: inline-block;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
似乎有效的方法是容器中隐藏的溢出和视频元素的内联块的组合。
答案 5 :(得分：0)
我正处于类似的情况，得出了一个尚未提及的解决方案：
html和body填充视口，#header和#footer以内容定义的高度填充，#content占据了两者之间的剩余空间。
#content由于其他原因已经是position: relative，因此将position: absolute添加到<video> 足以使其紧密贴合。
当视口的高度不足以适合整个视频时，现在object-fit: contain会裁剪顶部和底部，就像当视口太窄时，它会左右裁剪一样。
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
#content {
height: 100%;
position: relative; /* magic sauce II */
}
video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute; /* magic sauce */
}
/* colors for demonstration */
#header, #footer { background: green; }
video { background: blue; }<html>
<body>
<div id="header">...</div>
<div id="content">
<video src="http://www.w3schools.com/html/movie.mp4"></video>
</div>
<div id="footer">...</div>
<body>
</html>
答案 6 :(得分：-1)
这种格式有助于我尝试高分辨率BG视频的宽度。 甚至解决比例问题。 谢谢
<div >
<center><video style="position: relative;width: 900px; height: 700px; object-fit: cover;" class="bg-wrap" autoplay muted loop id="myVideo" src="videos/Raindrops.mp4" type="video/MP4"></video></center>
</div>
` <div style="position: absolute; top:200px; width:100%; height:auto; padding:50px 20px;background-color: rgba(128, 128, 128, 0.486);" class="content centered" style="object-fit: cover;">
<center>
<h1 style="font-size:700%;color:yellow;font-family: sans-serif;width:device-width">NIET</h1>
<p>My belove college</p>
</center>
</div>`