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.

Demo Download

Author Flowuhh
Hits
Created SEPTEMBER 19, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

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

Apply CSS Black and White Filter to YouTube Video preview

Advertisement

Google Matched Content...