【seo优化页面】网站制作用html5的video标签实现全屏视频背景

在 网站 项目的制作中，有时候需要在网站首页插入一段 视频 ，并且这段视频作为网页的背景全屏播放，不影响网站的正常浏览。百易搜网站建设公司给大家分享一种用Javascript库Bideo。js来 实现 此效果的思路。

首先要让视频可以自动调整，用Bideo。js根据当前浏览器窗口的大小自动调整视频尺寸，当浏览器窗口调整时，它会自适应窗口尺寸，移动端、PC端都能自动调整，使视频作为背景并全屏展示。然后要实现覆盖，视频作为网页背景后，我们可以任意在视频上层放置任意HTML内容。最后就是视频封面，页面打开时，视频可能需要几秒钟才能加载完，那么我们可以设置一张图片作为视频的封面，等加载完再播放。

对于HTML，<video> 标签 用来加载视频，然后用loop属性进行循环播放。用#video_cover设置视频封面。#overlay可以设置遮罩层，所有其他页面内容在遮罩层上展示。还可以添加#video_controls，用来控制视频播放与暂停。在CSS代码中，#container和#background_video的设置是关键，需要大家特别注意。