const cover = document.querySelector(".split-wrap"); const button = document.querySelector('.split-wrap'); // this line (function manageCurtain() { "use strict"; function hide(el) { el.classList.add("hide"); } function coverClickHandler(evt) { const cover = evt.currentTarget; hide(cover); button.querySelector('.j1').classList.add('move-left'); // this line button.querySelector('.j2').classList.add('move-right'); // this line const curtain = document.querySelector(".curtain"); curtain.classList.add("slide"); } const cover = document.querySelectorAll('.jacketa'); cover.forEach(function(el) { el.addEventListener('click', coverClickHandler) }); }()); const videoPlayer = (function makeVideoPlayer() { "use strict"; let player = null; const tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function onPlayerReady(event) { player = event.target; player.setVolume(100); // percent } let hasShuffled = false; function onPlayerStateChange(event) { const player = event.target; const shufflePlaylist = true; if (!hasShuffled) { player.setShuffle(shufflePlaylist); player.playVideoAt(0); hasShuffled = true; } } function addPlayer(video) { const playlist = "M7lc1UVf-VE"; new YT.Player(video, { width: 640, height: 360, host: "https://www.youtube-nocookie.com", playerVars: { autoplay: 0, controls: 1, loop: 1, rel: 0, iv_load_policy: 3, cc_load_policy: 0, fs: 0, disablekb: 1, playlist }, events: { "onReady": onPlayerReady, "onStateChange": onPlayerStateChange } }); } function play() { player.playVideo(); } return { addPlayer, play }; }()); function onYouTubeIframeAPIReady() { const wrapper = cover.parentElement ; const frameContainer = wrapper.querySelector(".video"); videoPlayer.addPlayer(frameContainer); } (function iife() { "use strict"; function show(el) { el.classList.remove("hide"); } function coverClickHandler(evt) { const wrapper = evt.currentTarget.parentElement; show(wrapper); videoPlayer.play(); } cover.addEventListener("click", coverClickHandler); }());

 html, body { height: 100%; padding: 0; margin: 0; } body { background: url(https://picsum.photos/id/1015/1500/1500) no-repeat; background-attachment: fixed; background-size: cover; } .outer { display: table; height: 100%; margin: 0 auto; width: 100%; } .tcell { display: table-cell; vertical-align: middle; padding: 8px 8px; } .curtain-wrapper { min-width: 40%; max-width: 640px; margin: auto; } .curtain-ratio-keeper { position: relative; padding-top: 56.25%; /* overflow: hidden; */ } .curtain { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: 3px solid red; box-sizing: border-box; border-radius: 25px; overflow: hidden; background: transparent; } .slide-wrap:before, .slide-wrap:after { content: ""; position: absolute; top: 0; width: 50%; height: 100%; transition: transform 5s linear; background: url(https://picsum.photos/id/1015/1500/1500) no-repeat; background-attachment: fixed; background-size: cover; } .slide-wrap:before { left: 0; } .slide-wrap:after { right: 0; } .slide .slide-wrap::before { transform: translateX(-100%); } .slide .slide-wrap::after { transform: translateX(100%); } .video-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .jacketa { position: absolute; top: 40px; width: 180px; height: 180px; cursor: pointer; border-radius: 50%; background: #130e85; border: 3px solid #f91f6e; box-sizing: border-box; box-shadow: 0 0 20px 2px #f9066bf7; display: block !important; } .j1 .jacketa { left: 30px; } .j2 .jacketa { right: 30px; } .jacketa .coversvg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; cursor: pointer; } .jacketa .coversvg { width: 70px; height: 75.4px; fill: none; stroke-width: 4px; stroke-miterlimit: 10; } .jacketa .coversvg .back { stroke: #000; opacity: 0.15; } .jacketa .coversvg .front { stroke: #08f9ff; stroke-dasharray: 150; stroke-dashoffset: 1500; animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both; } @keyframes draw { 100% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes flicker-1 { 0%, 100% { opacity: 1; } 41.99% { opacity: 1; } 42% { opacity: 0; } 43% { opacity: 0; } 43.01% { opacity: 1; } 47.99% { opacity: 1; } 48% { opacity: 0; } 49% { opacity: 0; } 49.01% { opacity: 1; } } .split-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 240px; height: 260px; margin: auto; border-radius: 50%; transition: 10s ease; z-index: 100; /* This line */ } .j1 { position: absolute; left: 0; top: 0; width: 50%; height: 100%; overflow: hidden; transition: 10s ease; /* transform: translate(-350px) /* This line */ } .j2 { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; overflow: hidden; transition: 10s ease; /* transform: translate(350px) This line */ } .curtain.slide .j1 { left: -500%; } .curtain.slide .j2 { left: 500%; } .wrap iframe { position: absolute; top: -3px; left: -3px; width: calc(100% + 6px); height: calc(100% + 6px); } .wrap, .jacket { position: absolute; top: -3px; left: -3px; width: calc(100% + 6px); height: calc(100% + 6px); } .hide { display: none; } /* movement class */ .move-right { transform: translate(350px); } .move-left { transform: translate(-350px); }

 <div class="outer"> <div class="tcell"> <div class="curtain-wrapper"> <div class="curtain-ratio-keeper"> <div class="split-wrap"> <div class="j1"> <div class="jacketa" title="[ Enjoy The Music ]"> <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66"> <title>[ Enjoy The Music ]</title> <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" /> <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" /> </svg> </div> </div> <div class="j2"> <div class="jacketa" title="[ Enjoy The Music ]"> <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66"> <title>[ Enjoy The Music ]</title> <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" /> <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" /> </svg> </div> </div> </div> <div class="curtain"> <div class="video-wrapper"> <div class="video-ratio-keeper"> <div class="wrap"> <div class="video video-frame"></div> </div> </div> </div> <div class="slide-wrap"></div> </div> </div> </div> </div> </div>