tauhidalamx · February 5, 2023 18:34 · Feb 5, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,110 @@
+<!--
+
+===================================
+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/
+-->
diff --git a/script.js b/script.js
@@ -0,0 +1 @@
+document.ontouchstart = function(){ document.getElementById('wp').play(); }
diff --git a/style.scss b/style.scss
@@ -0,0 +1,56 @@
+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;
+}
diff --git a/video-wallpaper-and-css-filters.markdown b/video-wallpaper-and-css-filters.markdown
@@ -0,0 +1,7 @@
+Video wallpaper and css filters
+-------------------------------
+
+
+A [Pen](https://codepen.io/jakob-e/pen/Qjpowv) by [jakob-e](https://codepen.io/jakob-e) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/Qjpowv).
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		document.ontouchstart = function(){ document.getElementById('wp').play(); }
No results found