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
Hits
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

Angled Youtube Embed with animation effect when hover preview

Advertisement

Google Matched Content...