Html 将 <video> 元素调整为父 div

Question

提问by spacecoyote

Has anyone been able to successfully resize a videoelement to a parent div?

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

My video element contains a webcam stream that comes in with a ratio of 4:3. I'd like to break the ratio and adjust it to the div size. I've tried the following:

我的视频元素包含一个带有ratio of 4:3. 我想打破比例并将其调整为 div 大小。我尝试了以下方法：

Set width and height 100%> this doesn't do anything, 4:3 remains
Set min-height and min-width 100%> this makes the video resize to something really huge that overflows the div
position:absolute, bottom, top, left and right: 0pxalso a huge flow over the parent div
Using javascript to get the parent divs height and width, then setting it for the video: No effect, 4:3 ratio remains, no size change.

设置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比例保持，尺寸不变。

How to do it?

怎么做？

EDIT: Thanks Gaurav for that greatly detailed reply. It looks good, I wish it would work for me though.

编辑：感谢 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;
}

My video element is in there, I gave it your CSS solution. Unfortunately it only turned white. Could my parentDiv css have anything to do with that?

我的视频元素在那里，我给了它你的 CSS 解决方案。不幸的是它只变白了。我的 parentDiv css 可能与此有关吗？

EDIT 2: Here's the HTML:

编辑 2：这是 HTML：

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

This is mainly it . The src-attribute of the video is set to my webcam stream.

主要是这样。视频的 src-attribute 设置为我的网络摄像头流。

EDIT 3:

编辑 3：

If I right-click and inspect the white (now red scribbled) part in this screenshot https://s22.postimg.cc/th4ha8nmp/ratio2.png, Chrome shows me that the white also belongs to the stream.

如果我右键单击并检查此屏幕截图https://s22.postimg.cc/th4ha8nmp/ratio2.png 中的白色（现在是红色涂鸦）部分，Chrome 会显示白色也属于流。

It seems as if the stream of the webcam comes along with white stripes at the top and bottom. This is.. annoying.

网络摄像头的流似乎在顶部和底部带有白色条纹。这很……烦人。

Answer 1

回答by 4dgaurav

1) CSS only

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

查询

from this answer - simulate background-size:cover on <video> or <img>

从这个答案 -在 <video> 或 <img> 上模拟 background-size:cover

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);
};

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) using iframe css only

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

回答by lightbringer

You can use the object-fit property to solve this. HTML:

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

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

CSS:

CSS：

.cam_video {
object-fit: fill;
}

This would make the video stretch to occupy the entire parent div.

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

Answer 3

回答by albiesoft.com

 object-fit: cover;

That did the trick for me.

这对我有用。

Answer 4

回答by Aadol Rrashid

This format helped me to chance width as I want for high resolution BG video. Even solve the ratio problems. Thanks

这种格式帮助我根据高分辨率 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>`

Html 将 <video> 元素调整为父 div

提问by spacecoyote

回答by 4dgaurav

回答by lightbringer

回答by albiesoft.com

回答by Aadol Rrashid

相关推荐

最近更新

标签

Html 将 <video> 元素调整为父 div

提问by spacecoyote

回答by 4dgaurav

回答by lightbringer

回答by albiesoft.com

回答by Aadol Rrashid

相关推荐

Html IE9 res://ieframe.dll 错误

嵌入到 HTML 中的视频无法播放

Html 垂直对齐 div（无表格）

Html CSS 绝对位置，其中 div 的左上角位于父级的右上角

相关推荐

最近更新

标签