[英]Html & Css: Video backgroud adapt monitor size
i need to use a mp4 video as background. 我需要使用mp4视频作为背景。 I would like the video to adapt to the size of the screen and not overlap with what is underneath.
我希望视频适应屏幕的大小,并且不与下面的内容重叠。 I write:
我写:
<video autoplay loop muted poster="<?php echo $wo['config']['theme_url'];?>/img/1-s.png" id="bgvid">
<!-- MP4 must be first for iPad! -->
<source src="<?php echo $wo['config']['theme_url'];?>/video/1bis.mp4" type="video/mp4" /><!-- Safari / iOS video -->
</video>
And my css is: 我的CSS是:
video#bgvid {
position: absolute; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
z-index: 0;
}
by assigning "top: 0", I would like the video to be displayed with: 通过分配“ top:0”,我希望视频显示为:
height: 100vh;
overflow: hidden;
Hi Matteo is better positioning 50% left and top and after traslate the video to center it inside the page. 嗨,Matteo最好将视频左移和左移50%,然后将视频平移到页面中央。
With z-index you can use negative number. 使用z-index,您可以使用负数。 If the video is used for background, add
z-index: -1
. 如果将视频用作背景,请添加
z-index: -1
。 In this way the other object stay over the video. 这样,另一个对象将停留在视频上方。
body { padding:0; } video { position: fixed; top:50%; left:50%; transform:translate(-50%,-50%); min-height:100%; min-width:100%; z-index:-1; }
<video autoplay loop> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> </video> <h1> PAGE TITLE </h1>
I found this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fullscreen_video that I think is the best solution for your case. 我找到了这个https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fullscreen_video ,我认为这是针对您的案例的最佳解决方案。 The key of your problem is the position of the video.
问题的关键是视频的位置。
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
Hope it helps! 希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.