css3响应式视频背景 视频自动播放带遮罩层
  • 分享到微信朋友圈
    X
立即下载 查看演示

文章内容

如何使用css3实现响应式视频背景？

关键技术点

  • 注意设定视频宽度和高度

  • 页面媒体查询技术(Media Queries)

  • 视频css设置object-fit: cover;

为了确保视频能够在电脑页面填充页面设置视频的宽度为： width: 100%; 高度为：height: 100%;object-fit设置为：object-fit: cover; 最后，使用媒体查询可以针对不同屏幕宽度设置不同的样式，进一步优化响应式表现。

 .banner-video video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    max-width: 100%;
}
@media (max-width: 1200px)
{ 
    .banner-video {
        height: 30vh;
    } 
}

这个代码可以保证视频在电脑效果填充整个页面，在页面小于等于1200像素的时候视频的宽度为100%，高度为整个页面的30%大小。 这样便达到了实现响应式的效果

object-fit: cover;这个属性会保证视频尺寸铺满容器并且保持原有的宽高比，超出的部分会被截断。这样，视频就可以在不同尺寸的视口上都保持良好的视觉效果。 使视频覆盖整个容器而不产生变形

视频html设置

<video autoplay="autoplay" loop="loop" muted="muted" poster="">
  <source src="http://img.jqfree.com/v1.mp4" type="video/mp4">
</video>

视频背景应当自动播放，并且自动循环播放。在video标签中设置autoplay、muted和loop

这里我设置了poster属性等于空，正常应该设置一个图片地址