[英]HTML5 video tag - how to set cover background size
I am trying the video tag of HTML5 and want to give background size cover property to it. 我正在尝试HTML5的视频标记,并希望为其提供背景大小封面属性。 It is not taking that property. 它没有拿走那个属性。 I had given width: 100%
and height: 100%
, also the video go outside container. 我给了width: 100%
和height: 100%
,视频也在容器外面。
How I can achieve it ? 我怎么能实现它?
CSS: CSS:
video#videoId{
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
Fix para IE: 修复IE:
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->
video { display: block; }
I suggest you to put your video tag inside a div wrapper. 我建议你把你的视频标签放在div包装器里面。
Rather than seeing video deformed, I prefer show black background. 我不喜欢看视频变形,而是喜欢显示黑色背景。
DEMO. DEMO。
In this way, video will adapt itself to the parent div size. 通过这种方式,视频将自己适应父div大小。
HTML HTML
<div id="main">
<video id="bunny" controls>
<source src="../video/video.mp4>
</video>
</div>
CSS CSS
#main {
height: 300px;
width: 300px;
background-color: black;
}
#bunny {
width: 100%;
height: 100%;
}
I needed to center the video and use it as a background , so I've cleaned and enhanced the answer Jagu provided. 我需要将视频居中并将其用作背景 ,因此我清理并增强了Jagu提供的答案。 It now optionally centers the video, and has an optional color overlay. 它现在可选择居中视频,并具有可选的颜色叠加。
Live Demo: https://jsfiddle.net/prrstn/vn9L2h1w/ 现场演示: https : //jsfiddle.net/prrstn/vn9L2h1w/
HTML HTML
<div>
<!-- Optional attributes, remove the features you don't want.
Add the "controls" attribute to get the video player buttons -->
<video autoplay loop muted>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
</video>
</div>
CSS CSS
div {
/* This keeps the video inside the div */
position: relative;
/* These are optional based on the size of
the area you want the video to cover */
width: 100%;
height: 500px;
/* Color overlay on video, optional */
background-color: rgba(0, 0, 0, 0.5);
}
video {
position: absolute;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
/* This puts the video BEHIND the div, optional */
z-index: -1;
/* These two properties center the video, optional */
left: 50%;
transform: translateX(-50%);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.