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.

Demo Download

Author Russ Pate

Created JULY 10, 2018

License Open

Compatible browsers Chrome, Firefox, Safari

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&amp;controls=0&amp;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