Skip to content

Instantly share code, notes, and snippets.

@DevShahidul

DevShahidul/youtube-custom-play-pause-stop-btn.html

Created March 21, 2019 09:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DevShahidul/b862cfdb47cb7b96c03d72bc4ed87135 to your computer and use it in GitHub Desktop.
Save DevShahidul/b862cfdb47cb7b96c03d72bc4ed87135 to your computer and use it in GitHub Desktop.
Download ZIP
See the example here >>> https://codepen.io/AmrSubZero/pen/oLOYrA
Raw
youtube-custom-play-pause-stop-btn.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title> Franchesca Watson | Home-HD</title>
<link type="text/css" rel="stylesheet" href="css/magnific-popup.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<style>
.buttons { position: relative; margin:0 auto 20px auto; padding:20px; float:left; display:block; background-color:#eee; border-radius:4px; }
.buttons:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(238, 238, 238, 0); border-top-color: #eee; border-width: 10px; margin-left: -10px; }
.button { padding:10px 20px; font-weight:bold; letter-spacing:5px; outline:none; cursor:pointer; color:white; background-color:#7F8C8D; border:none; border-radius:4px; }
#play-button { background-color:#2ECC71; }
#play-button:hover { background-color:#27AE60; }
#pause-button { background-color:#E67E22; }
#pause-button:hover { background-color:#D35400; }
#stop-button { background-color:#E74C3C; }
#stop-button:hover { background-color:#C0392B; }
#pause-button, #stop-button { margin-left:15px; }
iframe { margin:0 auto; width:560px; height:315px; float:left; clear:both; display:block; background-color:#eee; }
</style>
</head>
<body>
<div class="buttons">
<button class="button" id="play-button">PLAY</button>
<button class="button" id="pause-button">PAUSE</button>
<button class="button" id="stop-button">STOP</button>
</div>
<!-- Make sure ?enablejsapi=1 is on URL -->
<iframe id="video" src="https://www.youtube.com/embed/AASd5ewKNSw?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
// global variable for the player
var player;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
player = new YT.Player('video', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
var stopButton = document.getElementById("stop-button");
stopButton.addEventListener("click", function() {
player.stopVideo();
});
}
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment