Skip to content

Instantly share code, notes, and snippets.

@tauhidalamx

tauhidalamx/index.html

Created February 5, 2023 18:34
Show Gist options
  • Save tauhidalamx/b1c7b2a862363d7e74d7490dc9c1dadc to your computer and use it in GitHub Desktop.
Save tauhidalamx/b1c7b2a862363d7e74d7490dc9c1dadc to your computer and use it in GitHub Desktop.
Download ZIP
Video wallpaper and css filters
Raw
index.html
<!--
===================================
THE CODE
===================================
HTML
<div class="video-wallpaper">
<video autoplay loop playsinline muted poster="data:;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >
<source src="../video-source.mp4" type="video/mp4">
</video>
</div>
Note! The odd looking poster is a transparent gif to prevent
the default playbutton poster on android
CSS
// wrapper
.video-wallpaper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
// centered full screen cover video
.video-wallpaper video {
position: relative;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
// filtrers
.grayscale video { filter: grayscale(1); }
.sepia video { filter: sepia(1); }
.contrast video { filter: contrast(1); }
...
-->
<input type="checkbox" name="filter" id="pattern" checked />
<label for="pattern">Pattern</label>
<input type="radio" name="filter" id="none" />
<label for="none">None</label>
<input type="radio" name="filter" id="grayscale" />
<label for="grayscale">Grayscale</label>
<input type="radio" name="filter" id="sepia" />
<label for="sepia">Sepia</label>
<input type="radio" name="filter" id="contrast" />
<label for="contrast">Contrast</label>
<input type="radio" name="filter" id="hue-rotate" />
<label for="hue-rotate">Hue rotate</label>
<input type="radio" name="filter" id="blur" />
<label for="blur">Blur</label>
<input type="radio" name="filter" id="tint" />
<label for="tint">Tint</label>
<input type="radio" name="filter" id="inkwell" />
<label for="inkwell">Ink well</label>
<input type="radio" name="filter" id="invert" />
<label for="invert">Invert</label>
<input type="radio" name="filter" id="opacity" />
<label for="opacity">Opacity</label>
<input type="radio" name="filter" id="brightness" />
<label for="brightness">Brightness</label>
<input type="radio" name="filter" id="combo" checked />
<label for="combo">Combo</label>
<h1 >Video wallpaper and css filters</h1>
<div class="pattern">
<video id="wp" autoplay loop playsinline muted poster="//s3-us-west-2.amazonaws.com/s.cdpn.io/68939/wppost.jpg" >
<source src="//s3-us-west-2.amazonaws.com/s.cdpn.io/68939/vidwp.mp4" type="video/mp4">
</video>
</div>
<!--
iOS Update based on the new video politics for ios (https://webkit.org/blog/6784/new-video-policies-for-ios)
adding playsinline will allow the video to autoplay - if the video has no audio or is set to muted
Video: https://pixabay.com
Filters: https://bennettfeely.com/filters/
-->
Raw
script.js
document.ontouchstart = function(){ document.getElementById('wp').play(); }
Raw
style.scss
html { box-sizing: border-box; }
*,*:before,*:after { box-sizing: inherit; }
html { min-width: 100%; min-height: 100%;}
body {
margin:0;
background-color:#282828;
}
h1 { font-size: 24px; font-weight:300; font-family: sans-serif; padding:10px 30px; color: gold; -webkit-font-smoothing: antialiased;
position:absolute; z-index: 1; bottom:0; right:0; background: rgba(0,0,0,0.4); }
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
transform: translateX(-50%) translateY(-50%);
//background-image: url(//s3-us-west-2.amazonaws.com/s.cdpn.io/68939/wppost.jpg);
//background-size:cover;
//background-position: center;
}
label {
padding:8px 16px; background: rgba(0,0,0,0.9); color:#fff; font:700 12px sans-serif; -webkit-font-smoothing: antialiased; display:inline-block; cursor: pointer;
z-index:1; position: relative;
}
input {position:absolute; top:-20px; }
input:checked + label { color: gold }
[id="grayscale"]:checked ~ div video { filter: grayscale(1); }
[id="sepia"]:checked ~ div video { filter: sepia(1); }
[id="contrast"]:checked ~ div video { filter: contrast(3); }
[id="saturate"]:checked ~ div video { filter: saturate(4); }
[id="hue-rotate"]:checked ~ div video { filter: hue-rotate(90deg); }
[id="blur"]:checked ~ div video { filter: blur(5px); }
[id="tint"]:checked ~ div video { filter: sepia(1) hue-rotate(200deg); }
[id="invert"]:checked ~ div video { filter: invert(.8); }
[id="opacity"]:checked ~ div video { filter: opacity(.5); }
[id="inkwell"]:checked ~ div video { filter: grayscale(1) brightness(0.45) contrast(1.05); }
[id="brightness"]:checked ~ div video {filter: brightness(.5); }
[id="combo"]:checked ~ div video { filter: contrast(1.4) saturate(1.8) sepia(.6);}
[id="pattern"]:checked ~ div:before {
position:absolute;
content:'';
top:0;bottom:0;left:0;right:0;
$color: #000;
$rotation: 45/2;
background-image: linear-gradient(#{$rotation}deg, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
background-size: 4px 4px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment