<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<center>
<h1>YouTube Video Custom pause play button and a start from a given time</h1>
<br/>
<iframe id="video" src="https://www.youtube.com/embed/rsuqzqbmwcY?enablejsapi=1&html5=1&rel=0&start=5" allowfullscreen=""
frameborder="0" height="315" width="560"></iframe>
<br>
<button id="play-button">Play</button>
<button id="pause-button">Pause</button>
</center>
</body>
<script>
// https://developers.google.com/youtube/iframe_api_reference
// 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();
alert(player.getCurrentTime());
});
}
// Inject YouTube API script.
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
</html>