<script>
	var youtubeVideoID = "UP-E2bJVIik";
</script>

<div class="frame-youtube">
	<div class="frame-movie"></div>
	<div id="iframe_player_api"></div>
</div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var iframePlayerApiScriptTag = document.getElementsByTagName('script')[0];
iframePlayerApiScriptTag.parentNode.insertBefore(tag, iframePlayerApiScriptTag);
 
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('iframe_player_api', {
videoId: youtubeVideoID,
playerVars: {
'modestbranding': 1,
'autohide': 1,
'controls': 1,
'showinfo': 0,
'rel': 0,
'autoplay': 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(){
}
function onPlayerStateChange(event){
 
switch(event.data){
case YT.PlayerState.ENDED:
break;
case YT.PlayerState.PLAYING:
break;
case YT.PlayerState.BUFFERING:
break;
case YT.PlayerState.CUED:
break;
}
}
</script>

.frame-youtube {
  position: relative;
}
.frame-movie {
  position: absolute;
  width: 640px;
  height: 360px;
  border: solid 4px #fff;
  border-radius: 20px;
}
#iframe_player_api {
  margin: 4px;
  border-radius: 16px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.