将<video>元素的大小调整为父div

Question

有没有人能够成功地将video元素调整为父div？

我的视频元素包含一个带有的网络摄像头流ratio of 4:3.我想打破比率并将其调整为div大小.我尝试过以下方法:

• 设置width and height 100%>这没有做任何事情,4:3仍然存在
• 设置min-height and min-width 100%>这使视频调整大小到溢出div的东西
• position:absolute, bottom, top, left and right: 0px 父母div也有巨大的流量
• 使用javascript获取父div的高度和宽度,然后为视频设置:无效,4:3比率保持不变,没有大小变化.

怎么做？

编辑:感谢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会向我显示白色也属于流.

似乎网络摄像头的流在顶部和底部都带有白色条纹.这太烦人了.

Answer 1

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的

从这个答案 - 模拟背景大小:覆盖<video>或<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%;
}

Answer 2

您可以使用object-fit属性来解决此问题.HTML:

<div class="parentDiv"> 
    <video class="cam_video" autoplay></video>                      
</div>

CSS:

.cam_video {
object-fit: fill;
}

这将使视频拉伸占据整个父div.

Answer 3

我只是处于类似的情况，找到了尚未提及的解决方案：

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>

Answer 4

 object-fit: cover;

这对我来说很有效。