Angled Youtube Embed

angled-youtube-embed.markdown

Angled Youtube Embed

A Pen by Russ Pate on CodePen.

License.

index.html

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

script.js

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.5.0/Youtube.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

.vid {
   transition: .5s all;
   border-radius: 1rem;
   overflow: hidden;
   &-wrap {
      border-radius: 1rem;
      overflow: hidden;
   }

}

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

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.1/tachyons.css" rel="stylesheet" />