【问题标题】:Using a video as a background使用视频作为背景
【发布时间】:2013-10-20 13:27:03
【问题描述】:

我想知道使用视频作为背景的好方法,例如 Square Cash:https://square.com/cash

【问题讨论】:

  • 使用 CSS 将元素放在它前面。
  • 谢谢,但我想知道如何插入视频作为背景
  • 你不能。相反,您需要在视频前面放置元素。

标签: html css html5-video frontend


【解决方案1】:
<div id="video-container">
<video autoplay loop poster="http://media.w3.org/2010/05/sintel/poster.png" muted="muted">
                    <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
                    <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
                    <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
                    Your browser does not support the video tag. I suggest you upgrade your browser.
                </video>
</div><!-- end video-container -->




#video-container {
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;
        position: absolute;
}
video {
    position:absolute;
    z-index:0;
        width: 100%;
}

【讨论】:

  • 谢谢。这真的很有用
  • 很好的答案,我也遇到了同样的问题。你能附上任何现场或 jsfiddle 的例子更清楚。谢谢
  • 是的,一个小提琴会很好
  • 在后台播放的视频是否有理想的权重? 100Mb 太多了吗?
  • 不,为了获得最佳性能,您可以在画布中绘制视频并使用 jquery 调整画布大小
【解决方案2】:

为视频添加了object-fit: cover;,使其表现得像background-size: cover;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.videobg {
  height: 100vh;
  overflow: hidden;
  padding: 5vh;
  position: relative; /* requires for to position video properly */
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover; /* combined with 'absolute', works like background-size, but for DOM elements */
}
<div class="videobg">
  <video playsinline webkit-playsinline autoplay loop muted>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
  <img src="https://dummyimage.com/200x200/cc0000/ccc.jpg">
</div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-01-16
    • 2016-02-26
    • 1970-01-01
    • 2013-04-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多