Why I can set gif as background image url() in css, but can't set video mp4 as background url?
I tried everything, even setting url to point to svg that has foreign object video in it encoded as base64 in src attribute. But won't work.
I don't need video bcg as video element in html, i need exactly that as i can blur the content of the children using inherit background and before selector.
Why I can set gif as background image url() in css, but can't set video mp4 as background url?
I tried everything, even setting url to point to svg that has foreign object video in it encoded as base64 in src attribute. But won't work.
I don't need video bcg as video element in html, i need exactly that as i can blur the content of the children using inherit background and before selector.
Share Improve this question asked Sep 23, 2017 at 5:57 AlexAlex 3984 silver badges12 bronze badges 2-
Are you expecting video to be played when set at CSS
url()? – guest271314 Commented Sep 23, 2017 at 6:12 - yes exactly that – Alex Commented Sep 23, 2017 at 6:25
5 Answers
Reset to default 3CSS background and background-image properties only accept colours, gradients, bitmaps and SVG as values.
We can create a simple HTML5 video element and place it inside a container element. The image used in a poster attribute will be showed first, and then be replaced by the first frame of the video when it loads. Therefore it’s good practice to use the first frame of a video for a poster image.
You can draw the video playback at CSS url() by playing the media at <video> element, drawing the playing video at <canvas> element and calling .toDataURL() to set background of element to data URI at timeupdate event of <video> element
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
<script>
(async() => {
let div = document.querySelector("div");
let url = "https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4#t=10,20";
let video = document.createElement("video");
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
video.oncanplay = function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
div.style.width = video.videoWidth + "px";
div.style.height = video.videoHeight + "px";
this.play();
}
video.ontimeupdate = function() {
ctx.drawImage(this, 0, 0);
let dataURI = canvas.toDataURL();
div.style.background = `url(${dataURI})`;
}
let mediaBlob = await fetch(url).then(response => response.blob());
video.src = URL.createObjectURL(mediaBlob);
})()
</script>
</body>
</html>Firefox implements CSS element() function, which allows for example a <canvas> element to be set at background or background-image property using -moz-element() or Document.mozSetImageElement()
The
element()CSS function defines an<image>value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.
We can use .drawImage() and requestAnimationFrame() to draw the <video> onto the <canvas> see html5: display video inside canvas, Drawing video on canvas, which render a live feed of the <video> playback at for example a <div> element CSS background-image property.
const div = document.querySelector("div");
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
const video = document.createElement("video");
video.id = "video";
canvas.id = "canvas";
canvas.style.display = "none";
canvas.width = 320;
canvas.height = 280;
div.style.width = canvas.width + "px";
div.style.height = canvas.height + "px";
let raf;
const draw = () => {
if (video.paused || video.ended) {
window.cancelAnimationFrame(raf);
return;
}
ctx.drawImage(video, 0, 0, 320, 280);
raf = window.requestAnimationFrame(draw);
}
video.oncanplay = () => {
if ("mozSetImageElement" in document) {
div.style.backgroundImage = "-moz-element(#canvas)";
video.play();
draw();
}
}
video.src = "https://meeseeks.gamepedia./media/meeseeks.gamepedia./a/a6/Big-buck-bunny_trailer.webm";div {
text-align: center;
font-family: monospace;
font-size: 24px;
color: gold;
text-shadow: 1px 1px 1px red;
}<div>
div element
</div>Here's some video background code that worked for me:
in the html:
<video autoplay loop id="video-background" muted plays-inline>
<source src="<yourvideo>" type="video/mp4">
</video>
and in css:
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 75%;
width: auto;
height: auto;
z-index: -100;
}
for video in bg you should use video tag in html5!
here is the fullscrean video code:
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="video/big_buck_bunny.webm" type="video/webm">
<source src="video/big_buck_bunny.mp4" type="video/mp4">
<source src="video/big_buck_bunny.ogv" type="video/ogg">
</video>
and few simple lines of CSS:
.fullscreen-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
source: https://slicejack./fullscreen-html5-video-background-css/