CSS Gradient Over Video
- Started
- Last post
- 9 Responses
- mg33
Trying to figure out how to do the following:
Looping video as header, full width, with a gradient towards the bottom that fades into a solid background color for the site.
Anyone have some tips or resources for something like this? I did have an idea of dropping the video into After Effects and applying a gradient layer in the video, and just using a solid background color on the site. Not sure if that's easier or doing the gradient layer.
- imbecile1
z-index
display: block??
- detritus-4
I'd do it in video - it'll make your filesize marginally smaller, should run a bit quicker in browser as it should be less-processor intensive, especially where mobile is concerned.
imho, obv.
- Curious about the downvote - care to explain? A looping header vid is hardly a re-usable asset, so not worthwhile slowing the site down for redundant functiondetritus
- gradient in video = increased file size, as to avoid banding you'll need a high compression quality = big file size.shapesalad
- colors might not match exactly either depending on compressionspot13
- spot12's right on that last point, but a consistent dark gradient to dark/single colour increases filesize? You sure about that?detritus
- uan1
- though the autoplay loop thing is tricky i think....read browsers stopped supporting it, but then i saw a music band site that stripped benn's bandwidth awayuan
- the site had a mp4 on loop on autoplay...maybe they tricked the browser in doing it and that was the cause of the horrid bandwidth disasteruan
- I believe it works if there's no audio track within the video file, and mp4.shapesalad
- mg330
Someone at work said you can apply layers over video in Photoshop and output as video. Is that correct?
- PonyBoy0
layer it... drop a SVG w/gradient fill on top so you have the exact hex you need to match the site's color and the SVG will expand far better than a PNG. Set the vid and SVG file inside the same div. Set the SVG position @ absolute... if it's inside the same div as your video it should sit right on top of the video... then use a little css to scale the SVG to fit ( you may need some JS to do this... but so what ¯\_(ツ)_/¯ )
< div "videoAndSVG_Holder" >
< video >
< img SVG >
< / div >- the only reason I say to use SVG is so you can match your exact site's hex color—the svg file will about a 1/2 KB to your site. mp4 w/gradient color will be offPonyBoy
- *will addPonyBoy
- Thanks! Looking forward to trying this out. I assume I can save the SVG in its own in PS then import as a layer?mg33
- export it from illyPonyBoy
- why not use css gradient?shapesalad
- that'll work but I've run into Safari errors w/css gradients that have transparencies... especially multi-color / custom position of colorsPonyBoy
- Hayoth0
Use SVG over the top of the video.
- shapesalad1
It's simples. Something like this:
<div id="container">
<div id="gradient"></div><div id="video"><video class="bgvideo" autoplay="" playsinline="" loop="" src="****.mp4"></video></div>
</div>in your css:
#container{
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
overflow: hidden;
}
#gradient{
grid-column: 1 / span 1;
grid-row: 1 / span 1;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%);
z-index: 2;}
#video{
grid-column: 1 / span 1;
grid-row: 1 / span 1;
align-self: stretch;
justify-self: right;
width: 100%;
display: inline-block;
z-index: 1;
}- essentially your video fills the 1x1 css grid container, and is a layer below the div that uses simple css gradient to draw the gradient you want.shapesalad
- use this: https://cssgradient.…shapesalad
- might have issues in safari though!! if you're going w/just two color points (same color but one set w/a transparency) you should be okayPonyBoy
- sted0
Maybe im wrong this is a simple pseudo after element with a rbga bg?
and you can animate the gradient with css
- ESKEMA0
If you don't give a fuck about IE or Edge (I don't), just apply the background to the container and apply a mix-blend-mode to the video:
.video-container {
background: linear-gradient(to bottom, white 70%, black 100%) white;
}video {
max-width: 100%;
height: auto;
mix-blend-mode: multiply;
}working example:
http://d.balas.pt/s/video_backgr…- ie and edge don't support blendmodes... and safari can be a bit of a bitch w/them too... I'd run from this! :)PonyBoy