Apply CSS Black and White Filter to YouTube Video

CSS Black and White to YouTube Video is a simple filter in pure css that toggles a filter on the iframe video you can do stuff with mix-blend too that. Developed using css, html and javascript. Demo and download available.

HTML Snippet

 <div class="wrapper">   <input type="radio" name="radio" id="noFilter" checked="checked"/>   <input type="radio" name="radio" id="bwFilter"/>   <label for="noFilter">Normal</label>   <label for="bwFilter">Black &amp; White</label>   <iframe src="https://www.youtube.com/embed/QkubQCI4Fxo?autoplay=1;rel=0&amp;amp;controls=0&amp;amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media"></iframe> </div>

CSS Code

@import url("https://fonts.googleapis.com/css?family=Poppins"); .wrapper {   width: 100%;   height: 100%;   padding: 60px;   box-sizing: border-box;   background-color: #fcfcfc;   font-family: 'Poppins', sans-serif; } .wrapper input {   display: none; } .wrapper input:nth-of-type(1):checked ~ label:nth-of-type(1) {   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);   background-color: #56CBF9; } .wrapper input:nth-of-type(2):checked ~ label:nth-of-type(2) {   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);   background-color: #56CBF9; } .wrapper input:nth-of-type(2):checked ~ iframe {   -webkit-filter: grayscale(1);           filter: grayscale(1); } .wrapper label {   margin: 0 20px 20px 0;   display: inline-block;   cursor: pointer;   padding: 10px 20px;   border-radius: 30px;   background-color: #eee;   transition: 0.5s ease; } .wrapper label:hover {   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125); } .wrapper iframe {   width: 100%;   height: calc(100vh - 180px);   box-shadow: 0 20px 80px rgba(0, 0, 0, 0.25); }

Preview