// 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(); });
<div id="wrap" class="wrap"> <div class="movie" data-property="{ videoURL:'joP0K7gXvJo', containment:'#wrap', }"></div> <button class="btn" onclick="">sound</button> </div>
.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; }