Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angled Youtube Embed
<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>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '350',
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) {
$('.vid').removeClass('isAngled');
} else {
$('.vid').addClass('isAngled');
}
}
}
});
}
<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>
.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);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.1/tachyons.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.