video effect

by uto usui

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.1.13/jquery.mb.YTPlayer.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.1.13/css/jquery.mb.YTPlayer.min.css">
<div id="wrap" class="wrap">

  <div class="movie" data-property="{
      videoURL:'joP0K7gXvJo',
      containment:'#wrap',
    }"></div>

  <button class="btn" onclick="">sound</button>

</div>

SCSS

.wrap {
  position: relative;
  width: 90vw;
  height: 90vh;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5vh;
  transition: 1s;
  //
  &::after {
    content: '';
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-color: black;
    mix-blend-mode: color-burn;
    transition: .5s;
  }
  //
  &:hover {
    transform: scale(1.05);
    &::after {
      opacity: 0;
    }
  }
  iframe {
    transition: 1s;
  }
}

.btn {
  position: absolute;
  z-index: 99;
}

Babel + JSX

// https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

let $target = $('.movie');

$target.YTPlayer({
  autoPlay: true,
  loop: true,
  opacity: 1,
  mute: true,
  showControls: false,
  stopMovieOnBlur: false,
  onReady: () => {
    console.log('Ready');
  },
  onError: () => {
    console.log('Error');
  }
});

const filters = {
  grayscale: 0, // 1-100
  hue_rotate: 0, //　1-360
  invert: 0, // 1-100
  saturate: 0, // 1-400
  sepia: 0, // 1-100
  brightness: 200, // 1-400
  contrast: 200, // 1-400
  opacity: 0, // 1-100
  blur: 20 // 1-100
}
$target.YTPApplyFilters(filters);

$('.btn').on('click', (e) => {

  $target.YTPToggleVolume();
  $target.YTPToggleFilters();

});