Video player

In this example below you will see how to do a Video player with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by spiderwebrobot, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright spiderwebrobot ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <div class="video is-stopped" data-youtube-id="8SlB-SpDMKI">
    <div class="video-container" id="youtube-8SlB-SpDMKI" style="background-image:url(https://i.ytimg.com/vi/8SlB-SpDMKI/maxresdefault.jpg)"></div>
    <button data-youtube-command="playVideo" type="button">play</button>
    <!-- a pause-button can be added as well, just uncomment the following... -->
    <!--button data-youtube-command="pauseVideo" type="button">pause</button-->
    <button data-youtube-command="stopVideo" type="button">stop</button>
</div>

<div class="video is-stopped" data-youtube-id="H0XScE08hy8">
    <div class="video-container" id="youtube-H0XScE08hy8" style="background-image:url(https://i.ytimg.com/vi/H0XScE08hy8/maxresdefault.jpg)"></div>
    <button data-youtube-command="playVideo" type="button">play</button>
    <button data-youtube-command="stopVideo" type="button">stop</button>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/spiderwebrobot/video-player-aBddrg */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background-color: black;
  background-size: cover;
  background-postion: 0;
  background-repeat: no-repeat;
  overflow: hidden;
}
.video-container > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video.is-stopped .video-container > iframe {
  top: 100%;
}


/*Downloaded from https://www.codeseek.co/spiderwebrobot/video-player-aBddrg */
// HTML
// ====
// `<div data-youtube-id="${id}">
//     <div id="youtube-${id}"></div>
//     <button data-youtube-command="playVideo" type="button">play</button>
//     <button data-youtube-command="stopVideo" type="button">stop</button>
// </div>`

// USAGE
// =====
// var player = videoPlayer('[data-youtube-id]');

var videoPlayer = (function(){

    // private variables
    // =================

    var commands = [
        // a pause-command can be added as well,
        // just uncomment the following...
        // {
        //     'label': 'pauseVideo',
        //     'class': 'is-paused'
        // },
        {
            'label': 'playVideo',
            'class': 'is-playing'
        },
        {
            'label': 'stopVideo',
            'class': 'is-stopped'
        }
    ];

    // private functions
    // =================

    function each(selector, callback){
        var elements = document.querySelectorAll(selector);
        var length = elements.length;
        var i = 0;
        for(; i < length; i++){
            callback(elements[i], i);
        }
    }

    function closest(element, selector){
        if(element.closest){
            return element.closest(selector);
        }
        while (element.matches && !element.matches(selector)){
            element = element.parentNode;
        }
        return element.matches ? element : null;
    }

    function getSrc(youtubeId){
        return 'https://www.youtube.com/embed/' + youtubeId + '?enablejsapi=1';
    }

    function getHtml(youtubeId){
        var src = getSrc(youtubeId);
        return '<iframe id="youtube-player-' + youtubeId + '" src="' + src + '" frameborder="0"></iframe>';
    }

    function getContainer(youtubeId){
        return document.getElementById('youtube-' + youtubeId);
    }

    function getPlayer(youtubeId){
        return document.getElementById('youtube-player-' + youtubeId);
    }

    function updateUserInterface(component, youtubeCommand){
        // update component class-name, e.g. is-playing, is-stopped
        commands.forEach(function(command){
            if(command.label === youtubeCommand){
                component.classList.add(command.class);
            } else {
                component.classList.remove(command.class);
            }
        });
        // broadcast signal of command
        component.dispatchEvent(new Event(youtubeCommand));
    }

    function controlVideo(player, command){
        player.contentWindow.postMessage(JSON.stringify({
            'event': 'command',
            'func': command, // e.g. playVideo, stopVideo
            'args': []
        }), 'https://www.youtube.com');
    }

    function loadPlayer(youtubeId, youtubeCommand, component){
        var container = getContainer(youtubeId);
        if(container){
            // dump iFrame into container
            container.innerHTML = getHtml(youtubeId);
            // listen for iFrame load-event
            getPlayer(youtubeId).addEventListener('load', function(event){
                // after iFrame loaded, execute command and update UI
                controlVideo(this, youtubeCommand);
                updateUserInterface(component, youtubeCommand);
            }, false);
        }
    }

    function handleClick(event){
        var component = this;
        var callToAction = closest(event.target, '[data-youtube-command]');
        var youtubeCommand, youtubeId, youtubePlayer;
        // click-event will bubble-up, so only target youtube-commands
        if(callToAction){
            youtubeCommand = callToAction.getAttribute('data-youtube-command');
            youtubeId = component.getAttribute('data-youtube-id');
            youtubePlayer = getPlayer(youtubeId);
            // if player already loaded, then execute command and update UI
            if(youtubePlayer){
                controlVideo(youtubePlayer, youtubeCommand);
                updateUserInterface(component, youtubeCommand);
            }
            // otherwise load iFrame
            else {
                loadPlayer(youtubeId, youtubeCommand, component);
            }
        }
    }

    // public API
    // ==========

    return function(selector){
        each(selector, function(element){
            // bind click-event to each video-component
            element.addEventListener('click', handleClick, false);
        });
    }

})();


// on page load
document.addEventListener('DOMContentLoaded', function(event) {
    var player = videoPlayer('[data-youtube-id]');
});

Comments