Video player

Tutorials of (Video player) by Antonio contreras

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Video player</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <button data-video-id="1Q8fG0TtVAY" type="button">open</button>

<div id="video-player" class="playback">
    <button id="close-button" type="button">close</button>
    <div id="video-container"></div>
</div>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.playback {
    display: none;
}

.playback.is-open {
    display: block;
}
/* Downloaded from https://www.codeseek.co/ */
(function(){
    // private variables

    var videoPlayer = document.getElementById('video-player');
    var videoContainer = document.getElementById('video-container');
    var closeButton = document.getElementById('close-button');
    var openControls = document.querySelectorAll('[data-video-id]');
    var iframeId = 'video-iframe';
    var openClass = 'is-open';

    // private functions

    function controlVideo(iframe, func, event){
        event = event || 'command';
        iframe.contentWindow.postMessage(JSON.stringify({
            'event': event,
            'func': func,
            'args': []
        }), 'https://www.youtube.com');
    }

    function openPlayer(event){
        var videoId = event.target.getAttribute('data-video-id');
        var poster = event.target.getAttribute('data-poster');
        var iframe = getIframe(videoId);
        // add video iframe
        videoContainer.appendChild(iframe);
        // show video player
        videoPlayer.classList.add(openClass);
    }

    function closePlayer(event){
        var iframe = document.getElementById(iframeId);
        // stop video playback
        controlVideo(iframe, 'stopVideo');
        // hide video player
        videoPlayer.classList.remove(openClass);
        // remove video iframe
        videoContainer.removeChild(iframe);
    }

})();

This awesome code ( Video player ) is write by Antonio Contreras, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Antonio Contreras