How to Set a video as a webpage background and a webpage background for a video

How to Set a video as a webpage background and a webpage background for a video
Sometimes adding an animated background to a webpage will make the webpage look different.

Step 1: Prepare

To do this, we must first prepare a video.

Step 2: introduce video in html

Here we need to use the video/tag, and then write the video path in the source, autoplay is used to make it play automatically, muted is used to mute it, loop is loop playback, if you are willing to add, add, and drop.

<div class="videocontainer"><video class="fullscreenvideo" poster="__ROOT__/Themes/tdt/Asset/images/loginbg.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop=""><source src="__PUBLIC__/video/loginbg.mp4" type="video/mp4"></video></div>

Step 3: Set css and adjust the video to adapt to the screen　

The above steps cannot meet our needs. At this time, we will find a scroll bar, and the video will block the content we want to display. But this is far from the result we want, what about me?

.fullscreenvideo {position: absolute;    top: 50%;    left: 50%;    min-width: 100%;    min-height: 100%;    width: auto;    height: auto;    z-index: -100;    -webkit-transform: translateX(-50%) translateY(-50%);    transform: translateX(-50%) translateY(-50%);    -webkit-transition: 1s opacity;    transition: 1s opacity;}.videocontainer{    position: fixed;    width: 100%;    height: 100%;    overflow: hidden;    z-index: -100;}.videocontainer:before{    content: "";    position: absolute;    width: 100%;    height: 100%;    display: block;    z-index: -1;    top: 0;    left: 0;    background: rgba(25,29,34,.65);}

Step 4: js controls video playback speed

You can use the playbackRate attribute of video to control the playback speed of video. To make the background video play slowly, add the following javascript

<script>    var video= document.getElementById('v1');    video.playbackRate = 0.5;</script>

Okay, go and set your own cool background.