Angled Youtube Embed with animation effect when hover

Angled Youtube Embed with animation effect when hover developed using css, html and javascript. Demo and download available.

HTML Snippet

<div class="vh-100 flex justify-center items-center vh-100">    <div id="vidWrapper" class="vid isAngled">       <div id="ytplayer" class="vid-wrap"></div>     </div> </div>

CSS Code

.vid {   transition: .5s all;   border-radius: 1rem;   overflow: hidden; } .vid-wrap {   border-radius: 3rem;   overflow: hidden; }  .isAngled {   transform: perspective(1000px) rotateY(25deg);   perspective: 10px;   transform-style: preserve-3d;   box-shadow: -20px 30px 85px rgba(210, 130, 190, 0.5);   transition: .5s all;   border-radius: 1rem;   overflow: hidden; } .isAngled:hover {   transform: perspective(0px) rotateY(0deg);   box-shadow: 0 5px 20px rgba(210, 130, 190, 0.75); }

JavaScript Snippet

var player;            function onYouTubeIframeAPIReady() {         player = new YT.Player('ytplayer', {           height: '360',           width: '615',           videoId: '3-aM0DrLuuw?rel=0&controls=0&showinfo=0&modestbranding=1',           events: {             'onStateChange': function(event) {               if (event.data == YT.PlayerState.PLAYING) {                  console.log("booboo")                  $('.vid').removeClass('isAngled');               } else {                  $('.vid').addClass('isAngled');               }             }           }         });       }        // function pauseAudio() {       //   ...       // }

Preview