前端JS特效第41波：超实用的全屏视频背景插件

强迫老板HelloWord

于 2024-07-17 11:00:00 发布

阅读量276

点赞数 1

文章标签：前端 javascript 音视频

本文链接：https://blog.youkuaiyun.com/wangtianming88/article/details/139906551

版权

超实用的全屏视频背景插件，先来看看效果：

部分核心的代码如下：

<!doctype html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>超实用的全屏视频背景插件-Bideo.js</title>

  <style>
    * {
      margin: 0; padding: 0;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    #container {
      overflow: hidden;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
    }

    #background_video {
      position: absolute;

      top: 50%; left: 50%;
      transform: translate(-50%, -50%);

      object-fit: cover;
      height: 100%; width: 100%;
    }

    #video_cover {
      position: absolute;

      width: 100%; height: 10

最低0.47元/天解锁文章