ksingh
1/19/2019 - 7:36 AM

YouTube Video Custom pause play button and a start from a given time

YouTube Video Custom pause play button and a start from a given time

youtube-custom-pause-play-buttons.html
content_copyfile_download
<!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>