如何将<video>元素调整为父div?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (66)

有没有人能够成功地调整一个video元素的父div?

我的视频元素包含一个摄像头流,它带有一个ratio of 4:3。我想打破比例并将其调整为div尺寸。

有人知道该怎么做吗?

提问于
用户回答回答于

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

3)仅使用iframe CSS

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%;
}
用户回答回答于

可以使用Object Fit属性来解决这个问题。HTML:

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

CSS:

.cam_video {
object-fit: fill;
}

这将使视频延伸到占据整个父div。

扫码关注云+社区

领取腾讯云代金券