Position video and make it repeat in background like images
Question
Is there a way to position a video that I put in the background of my html page and make it repeat as I would do with an image/gif using the background-* css properties? I'm sure this isn't possible with the current version of CSS but maybe there is a way to do it with JavaScript. The video was originally a gif, and what I am trying to do works with a gif, but I converted it to a webm and mp4 to improve load performance and save bandwidth. Below is code of what I would do if my video was a gif and then there is code of what I have currently and want to replicate the code for "Video as Gif".
Video as Gif
body { background: url('https://media3.giphy.com/media/KZFrf9JusXzmpnPsT6/giphy.gif?cid=ecf05e47nlo6zhk89xm58aaee38kzq5tddoko195kri6hv0e&rid=giphy.gif') center center; background-repeat: repeat; position: relative; background-size: auto; overflow: hidden; width: 100%; }
<html> <body> </body> </html>
Gif as Video
#video-background { top: 0; left: 0; position: absolute; width: 100%; height: 100%; background-repeat: repeat; overflow: hidden; }
<div id="video-background"> <video aria-hidden="true" playsinline="" autoplay="" muted="" loop=""> <source src="//starlink.ua/media/mod_starlink/car-blur.webm" type="video/webm"> <source src="//starlink.ua/media/mod_starlink/car-blur.mp4" type="video/mp4"></video> </div>2 answers
solution1
0 2020-09-03 22:13:46
Is there a way to position a video that I put in the background of my html page and make it repeat as I would do with an image/gif using the background-* css properties?
I don't think so.
You can use JS to clone the video element as many times as it takes to fill the screen. *Note you'll need to handle window resize.
https://jsfiddle.net/ajd62q5t/
const videoWidth = 480; let videoHeight = 0; let grid; let ww = window.innerWidth; let wh = window.innerHeight; const elWrapper = document.querySelector("#video-background > div"); const elVideo = elWrapper.querySelector("video"); elVideo.addEventListener( "loadeddata", () => { setVideoHeight(); generateVideoGrid(); updateStyles(); }, false ); function setVideoHeight() { const aspectRatio = elVideo.videoWidth / elVideo.videoHeight; videoHeight = videoWidth / aspectRatio; } function generateVideoGrid() { let cols = 1; let rows = 1; if (ww > videoWidth) { cols = Math.ceil(ww / videoWidth); if (cols % 2 === 0) { cols++; } } if (wh > videoHeight) { rows = Math.ceil(wh / videoHeight); if (rows % 2 === 0) { rows++; } } const copies = cols * rows; for (let i = 1; i < copies; i++) { const clone = elVideo.cloneNode(true); elWrapper.appendChild(clone); } grid = [cols, rows]; } function updateStyles() { document.documentElement.style.setProperty( "--video-width", `${videoWidth}px` ); document.documentElement.style.setProperty( "--video-height", `${videoHeight}px` ); document.documentElement.style.setProperty("--video-bg-grid-cols", grid[0]); document.documentElement.style.setProperty("--video-bg-grid-rows", grid[1]); elWrapper.classList.add('ready'); }
#video-background { top: 0; left: 0; position: fixed; width: 100%; height: 100%; overflow: hidden; pointer-events: none; /* Center the grid */ display: flex; justify-content: center; align-items: center; } #video-background > div { display: grid; grid-template-columns: repeat(var(--video-bg-grid-cols), var(--video-width)); grid-template-rows: repeat(var(--video-bg-grid-rows), var(--video-height)); opacity: 0; transition: opacity 2s ease; } #video-background > div.ready { opacity: 1; } video { display: block; height: var(--video-height); width: var(--video-width); }
<div id="video-background"> <div> <video aria-hidden="true" playsinline="" autoplay="" muted="" loop=""> <source src="//starlink.ua/media/mod_starlink/car-blur.webm" type="video/webm"> <source src="//starlink.ua/media/mod_starlink/car-blur.mp4" type="video/mp4"></video> </div> </div>
solution2
0 2020-09-07 03:50:04
HTML
<video autoplay loop muted id="bgvideo">
<source src="YOUR VIDEO SOURCE">
</video>
CSS
#bgvideo {
position: fixed;
min-height: 100%;
min-width: 100%;
z-index: -100; }
This will make your video in the background and will be auto-played, Z index will allow you to make new changes on the video and video will be completely at the back and your new elements in the front.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.