全屏背景视频,并保持其居中
Fullscreen background video and keep it centered
我想创建一个网站,我有一些HTML5的背景视频播放。一切都很顺利,就像我想要的那样。但我也想保持图像在屏幕的中心,即使当用户调整浏览器的大小。
<video id="video" src="video/video.mov" type="video/mov" autoplay loop></video>
我得到了这个工作与一些jQuery,但想知道是否有一个CSS解决方案。
function resizeHandler() {
// scale the video
var documentHeight = $(document).height();
var documentWidth = $(document).width();
var ratio = $('#video').width() / $('#video').height();
if((documentWidth / documentHeight) < ratio) {
$('#video').css({
'width': 'auto',
'height': '100%',
'left': '0px',
'right': '0px',
'top': '0px',
'bottom': '0px'
})
var marginRight = $('#video').width() - $(document).width();
$('#video').css('left', -marginRight);
} else {
$('#video').css({
'width': '100%',
'height': 'auto',
'left': '0px',
'right': '0px',
'top': '0px',
'bottom': '0px'
})
var marginTop = $('#video').height() - $(document).height();
$('#video').css('top', -marginTop);
}
}
这是我编写的jQuery,用于拉伸图像以适应屏幕,并保持图像居中。不确定这在CSS中是否可行,但如果有人知道怎么做,这可能会很好。
这个问题刚刚被引用到Place视频中,高度为100% &100%宽度使用CSS或javascript
我猜我的答案可能就是你一直在寻找的那个?代码如下:
header {
position: relative;
height: 100vh;
z-index: 0;
}
header h1 {
text-align: center;
font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;
color: #fff
}
header video {
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
<header>
<h1>Sample Title</h1>
<video autoplay loop class="bg-video">
<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
</video>
</header>
这里有一个工作小提琴的例子。
希望能帮到别人
我会尝试在固定包装器的绝对位置居中视频。例如:
将您的视频放置在固定的包装中,宽度和高度为100%:
#video-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
将视频居中,并设置边距auto:
#video {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
并设置min-width和min-height:
#video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
这里是最终结果:
#video-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#video {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
<div id="video-wrap">
<video id="video" loop autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
这里还有一个jsfiddle。
这将使#video
成为视口的整个大小,并在用户滚动时保持在那里。
#video {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
使用Css属性。object-fit:封面;
body, html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
video {
height: 100%;
width: 100%;
}
<video controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
相关文章:
- 苹果/野生动物园在移动设备上播放背景视频时出现问题
- 显示几个背景视频
- 背景视频是由ScrollMagic一开始的最后一个场景触发的
- 背景视频的静音/取消静音图标
- 整页.js - 在背景视频循环播放时向右移动幻灯片
- 如何修复在某些浏览器上停止工作的背景视频
- 等待背景视频完全加载,然后显示
- 更改浏览器大小时更改背景视频的大小
- 优化移动/低速连接-全背景视频
- CSS保持背景视频居中
- 背景视频HTML5
- jQuery-使用复选框在背景图片和背景视频之间切换
- 暂停按钮不工作的背景视频
- 需要帮助在JavaScript改变和停止背景视频
- 随机HTML5背景视频页面加载/刷新
- 如何在背景视频上覆盖文本
- 当在移动设备的视频标签(HTML5)中使用时,停止背景视频下载
- 问题的背景视频静音在mb.YTPlayer jQuery插件
- 全屏背景视频,并保持其居中
- 循环播放Youtube背景视频