将 <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 会告诉我白色也属于流。

似乎网络摄像头的流与顶部和底部的白色条纹一起出现。这……烦人。

原文由 spacecoyote 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1) 仅 CSS

演示

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

演示

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

从这个答案 - 在

>  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**

`演示`

HTML

css

.h_iframe iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

”`

原文由 4dgaurav 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 object-fit 属性来解决这个问题。 HTML:

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

CSS：

 .cam_video {
object-fit: fill;
}

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

原文由 lightbringer 发布，翻译遵循 CC BY-SA 3.0 许可协议