Custom Responsive HTML5 Video Player – GGplayer

Preview:

Description:

GGplayer is a lightweight, customizable and responsive HTML5 video player that features modal / fullscreen modes, social share links, Keyboard shortcuts and more.

How to use it:

Load the required Font Awesome iconic font for the player icons.

<link href="/path/to/font-awesome.min.css" rel="stylesheet">

Load the GGplayer’s JS and CSS files in the page.

<link href="app.min.css" rel="stylesheet">
<script src="app.min.js"></script>

Create the html for the video player. Don’t forget to replace the video files with your owns.

<div class="gg-player paused">
  <video src="assets/video/video.mp4" poster="assets/img/poster.jpg">
    <track src="assets/video/thumb.vtt" kind="metadata" default>
  </video>
  <div class="gg-player-controls">
    <div class="gg-player-controls-top">
      <div class="gg-player-controls-top-infos">
        <h2 class="gg-player-controls-top-infos-title">Sausage Party - Trailer</h2>
        <p class="gg-player-controls-top-infos-description">Sausage Party is about one sausage leading a group of supermarket products on a quest to discover the truth about their...<!-- existence and what really happens when they become chosen to leave the grocery store. The film features the vocal talents of a who’s who of today’s comedy stars – Seth Rogen, Kristen Wiig, Jonah Hill, Bill Hader, Michael Cera, James Franco, Danny McBride, Craig Robinson, Paul Rudd, Nick Kroll, David Krumholtz, Edward Norton, and Salma Hayek.--></p>
      </div>
      <!-- .gg-player-controls-top-infos -->
      
      <div class="gg-player-controls-top-share">
        <button type="button" class="gg-player-controls-top-share-facebook"> <svg viewBox="0 0 430.113 430.114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M158.081,83.3c0,10.839,0,59.218,0,59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805c0,0,5.601-34.721,8.316-72.685c-7.784,0-67.784,0-67.784,0s0-42.127,0-49.511c0-7.4,9.717-17.354,19.321-17.354c9.586,0,29.818,0,48.557,0c0-9.859,0-43.924,0-75.385c-25.016,0-53.476,0-66.021,0C155.878-0.004,158.081,72.48,158.081,83.3z"/>
        </svg> </button>
        <button type="button" class="gg-player-controls-top-share-twitter"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 612 612">
        <path d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z"/>
        </svg> </button>
        <button type="button" class="gg-player-controls-top-share-googleplus"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
        <path d="M314.262,288.662c-12.359,82.097-74.152,126.234-153.6,126.234C71.503,414.897,0,345.159,0,256S71.503,97.103,160.662,97.103c43.255,0,81.214,12.359,108.579,38.841l-46.786,46.786c-15.007-15.89-37.076-23.834-61.793-23.834c-52.966,0-98.869,44.138-98.869,97.103s45.903,97.103,98.869,97.103c44.138,0,77.683-28.248,87.393-70.621h-89.159V220.69h155.366c1.766,10.593,2.648,23.834,2.648,35.31C316.91,267.476,316.028,278.069,314.262,288.662"/>
        <polygon points="512,264.828 459.034,264.828 459.034,317.793 414.897,317.793 414.897,264.828 361.931,264.828 361.931,220.69 414.897,220.69 414.897,167.724 459.034,167.724 459.034,220.69 512,220.69"/>
        </svg> </button>
      </div>
      <!-- .gg-player-controls-top-share --> 
    </div>
    <!-- .gg-player-controls-top -->
    
    <div class="gg-player-controls-bottom">
      <div class="gg-player-controls-bottom-bar">
        <div class="gg-player-controls-bottom-bar-progression"></div>
      </div>
      <!-- .gg-player-controls-bottom-bar -->
      
      <div class="gg-player-controls-bottom-thumb"></div>
      <div class="gg-player-controls-bottom-state">
        <button type="button" class="gg-player-controls-bottom-state-button"> <svg class="play-state" viewBox="0 0 9.7 11.69" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M99.6,337.5l-8.3-5.2c-0.6-.4-1.1-0.1-1.1.7v10a0.7,0.7,0,0,0,1.1.7l8.3-5.2A0.57,0.57,0,0,0,99.6,337.5Z" transform="translate(-90.2 -332.12)"/>
        </svg> <svg class="pause-state" viewBox="0 0 10.4 11.6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path class="cls-1" d="M72.7,332.7H70.9a0.9,0.9,0,0,0-.9.9v9.8a0.9,0.9,0,0,0,.9.9h1.8a0.9,0.9,0,0,0,.9-0.9v-9.8A0.9,0.9,0,0,0,72.7,332.7Z" transform="translate(-63.2 -332.7)"/>
        <path class="cls-1" d="M65.9,332.7H64.1a0.9,0.9,0,0,0-.9.9v9.8a0.9,0.9,0,0,0,.9.9h1.8a0.9,0.9,0,0,0,.9-0.9v-9.8A0.9,0.9,0,0,0,65.9,332.7Z" transform="translate(-63.2 -332.7)"/>
        </svg> </button>
      </div>
      <!-- .gg-player-controls-bottom-state -->
      
      <div class="gg-player-controls-bottom-time"> <span class="current-time">00:00</span> / <span class="full-time">00:00</span> </div>
      <!-- .gg-player-controls-bottom-time -->
      
      <div class="gg-player-controls-bottom-volume">
        <button type="button" class="gg-player-controls-bottom-volume-button"> <svg class="no-volume" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M46.414,26l7.293-7.293c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0L45,24.586l-7.293-7.293c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L43.586,26l-7.293,7.293c-0.391,0.391-0.391,1.023,0,1.414C36.488,34.902,36.744,35,37,35s0.512-0.098,0.707-0.293L45,27.414l7.293,7.293C52.488,34.902,52.744,35,53,35s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L46.414,26z"/>
        <path d="M28.404,4.4c-0.975-0.552-2.131-0.534-3.09,0.044c-0.046,0.027-0.09,0.059-0.13,0.093L11.634,16H1c-0.553,0-1,0.447-1,1v19c0,0.266,0.105,0.52,0.293,0.707S0.734,37,1,37l10.61-0.005l13.543,12.44c0.05,0.046,0.104,0.086,0.161,0.12c0.492,0.297,1.037,0.446,1.582,0.446c0.517-0.001,1.033-0.134,1.508-0.402C29.403,49.035,30,48.005,30,46.844V7.156C30,5.995,29.403,4.965,28.404,4.4z M28,46.844c0,0.431-0.217,0.81-0.579,1.015c-0.155,0.087-0.548,0.255-1,0.026L13,35.556V31c0-0.553-0.447-1-1-1s-1,0.447-1,1v3.996L2,35V18h9v4c0,0.553,0.447,1,1,1s1-0.447,1-1v-4.536l13.405-11.34c0.46-0.242,0.86-0.07,1.016,0.018C27.783,6.347,28,6.725,28,7.156V46.844z"/>
        </svg> <svg class="zero-volume" viewBox="0 0 46.004 46.004" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M36.406,0.402c-0.976-0.552-2.131-0.534-3.09,0.044c-0.046,0.027-0.09,0.059-0.13,0.093L19.636,12.002H9.002c-0.553,0-1,0.447-1,1v19c0,0.266,0.105,0.52,0.293,0.707s0.441,0.293,0.707,0.293l10.61-0.005l13.543,12.44c0.05,0.046,0.104,0.086,0.161,0.12c0.492,0.297,1.037,0.446,1.582,0.446c0.517-0.001,1.033-0.134,1.508-0.402c0.999-0.564,1.596-1.595,1.596-2.756V3.158C38.002,1.997,37.405,0.967,36.406,0.402z M36.002,42.845c0,0.431-0.217,0.81-0.579,1.015c-0.155,0.087-0.548,0.255-1,0.026L21.002,31.557v-4.556c0-0.553-0.447-1-1-1s-1,0.447-1,1v3.996l-9,0.004v-17h9v4c0,0.553,0.447,1,1,1s1-0.447,1-1v-4.536l13.405-11.34c0.461-0.242,0.86-0.07,1.016,0.018c0.362,0.205,0.579,0.584,0.579,1.015V42.845z"/>
        </svg> <svg class="one-volume" viewBox="0 0 46.004 46.004" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M29.893,0.402c-0.976-0.552-2.132-0.534-3.09,0.044c-0.046,0.027-0.09,0.059-0.13,0.093L13.122,12.002H2.489c-0.553,0-1,0.447-1,1v19c0,0.266,0.105,0.52,0.293,0.707s0.441,0.293,0.707,0.293l10.61-0.005l13.543,12.44c0.05,0.046,0.104,0.086,0.161,0.12c0.492,0.297,1.037,0.446,1.582,0.446c0.517-0.001,1.033-0.134,1.508-0.402c0.999-0.564,1.596-1.595,1.596-2.756V3.158C31.489,1.997,30.892,0.967,29.893,0.402z M29.489,42.845c0,0.431-0.217,0.81-0.579,1.015c-0.155,0.087-0.548,0.255-1,0.026L14.489,31.557v-4.556c0-0.553-0.447-1-1-1s-1,0.447-1,1v3.996l-9,0.004v-17h9v4c0,0.553,0.447,1,1,1s1-0.447,1-1v-4.536l13.405-11.34c0.461-0.242,0.86-0.07,1.016,0.018c0.362,0.205,0.579,0.584,0.579,1.015V42.845z"/>
        <path d="M34.766,9.54c-0.532-0.151-1.085,0.152-1.238,0.684c-0.153,0.53,0.152,1.085,0.684,1.238c4.889,1.413,8.304,5.953,8.304,11.04s-3.415,9.627-8.304,11.04c-0.531,0.153-0.837,0.708-0.684,1.238c0.127,0.438,0.526,0.723,0.961,0.723c0.092,0,0.185-0.013,0.277-0.039c5.74-1.66,9.749-6.99,9.749-12.962S40.506,11.2,34.766,9.54z"/>
        </svg> <svg class="two-volume" viewBox="0 0 52.026 52.026" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M28.404,3.413c-0.976-0.552-2.131-0.534-3.09,0.044c-0.046,0.027-0.09,0.059-0.13,0.093L11.634,15.013H1c-0.553,0-1,0.447-1,1v19c0,0.266,0.105,0.52,0.293,0.707S0.734,36.013,1,36.013l10.61-0.005l13.543,12.44c0.05,0.046,0.104,0.086,0.161,0.12c0.492,0.297,1.037,0.446,1.582,0.446c0.517-0.001,1.033-0.134,1.508-0.402C29.403,48.048,30,47.018,30,45.857V6.169C30,5.008,29.403,3.978,28.404,3.413z M28,45.857c0,0.431-0.217,0.81-0.579,1.015c-0.155,0.087-0.548,0.255-1,0.026L13,34.569v-4.556c0-0.553-0.447-1-1-1s-1,0.447-1,1v3.996l-9,0.004v-17h9v4c0,0.553,0.447,1,1,1s1-0.447,1-1v-4.536l13.405-11.34c0.461-0.242,0.86-0.07,1.016,0.018C27.783,5.36,28,5.739,28,6.169V45.857z"/>
        <path d="M38.797,7.066c-0.523-0.177-1.091,0.103-1.269,0.626c-0.177,0.522,0.103,1.091,0.626,1.269c7.101,2.411,11.872,9.063,11.872,16.553c0,7.483-4.762,14.136-11.849,16.554c-0.522,0.178-0.802,0.746-0.623,1.27c0.142,0.415,0.53,0.677,0.946,0.677c0.107,0,0.216-0.017,0.323-0.054c7.896-2.693,13.202-10.106,13.202-18.446C52.026,17.166,46.71,9.753,38.797,7.066z"/>
        <path d="M43.026,25.513c0-5.972-4.009-11.302-9.749-12.962c-0.533-0.151-1.084,0.152-1.238,0.684c-0.153,0.53,0.152,1.085,0.684,1.238c4.889,1.413,8.304,5.953,8.304,11.04s-3.415,9.627-8.304,11.04c-0.531,0.153-0.837,0.708-0.684,1.238c0.127,0.438,0.526,0.723,0.961,0.723c0.092,0,0.185-0.013,0.277-0.039C39.018,36.815,43.026,31.485,43.026,25.513z"/>
        </svg> <svg class="three-volume" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M28.404,7.758c-0.975-0.552-2.131-0.534-3.09,0.044c-0.046,0.027-0.09,0.059-0.13,0.093L11.634,19.358H1c-0.553,0-1,0.447-1,1v19c0,0.266,0.105,0.52,0.293,0.707S0.734,40.358,1,40.358l10.61-0.005l13.543,12.44c0.05,0.046,0.104,0.086,0.161,0.12c0.492,0.297,1.037,0.446,1.582,0.446c0.517-0.001,1.033-0.134,1.508-0.402C29.403,52.393,30,51.363,30,50.201V10.514C30,9.353,29.403,8.323,28.404,7.758z M28,50.201c0,0.431-0.217,0.81-0.579,1.015c-0.155,0.087-0.548,0.255-1,0.026L13,38.913v-4.556c0-0.553-0.447-1-1-1s-1,0.447-1,1v3.996l-9,0.004v-17h9v4c0,0.553,0.447,1,1,1s1-0.447,1-1v-4.536l13.405-11.34c0.461-0.242,0.861-0.07,1.016,0.018C27.783,9.704,28,10.083,28,10.514V50.201z"/>
        <path d="M52.026,29.858c0-8.347-5.316-15.76-13.229-18.447c-0.522-0.177-1.091,0.103-1.269,0.626c-0.177,0.522,0.103,1.091,0.626,1.269c7.101,2.411,11.872,9.063,11.872,16.553c0,7.483-4.762,14.136-11.849,16.554c-0.522,0.178-0.802,0.746-0.623,1.27c0.142,0.415,0.53,0.677,0.946,0.677c0.107,0,0.216-0.017,0.323-0.054C46.721,45.611,52.026,38.198,52.026,29.858z"/>
        <path d="M44.453,6.374c-0.508-0.213-1.095,0.021-1.312,0.53C42.926,7.413,43.163,8,43.672,8.216C52.376,11.909,58,20.405,58,29.858c0,9.777-5.894,18.38-15.015,21.914c-0.515,0.2-0.771,0.779-0.571,1.294c0.153,0.396,0.532,0.639,0.933,0.639c0.12,0,0.242-0.021,0.361-0.067C53.605,49.801,60,40.467,60,29.858C60,19.6,53.897,10.382,44.453,6.374z"/>
        <path d="M43.026,29.858c0-5.972-4.009-11.302-9.749-12.962c-0.53-0.151-1.084,0.152-1.238,0.684c-0.153,0.53,0.152,1.085,0.684,1.238c4.889,1.413,8.304,5.953,8.304,11.04s-3.415,9.627-8.304,11.04c-0.531,0.153-0.837,0.708-0.684,1.238c0.127,0.438,0.526,0.723,0.961,0.723c0.092,0,0.185-0.013,0.277-0.039C39.018,41.159,43.026,35.829,43.026,29.858z"/>
        </svg> </button>
      </div>
      <!-- .gg-player-controls-bottom-volume -->
      
      <div class="gg-player-controls-bottom-volumebar">
        <div class="gg-player-controls-bottom-volumebar-progression"></div>
      </div>
      <!-- .gg-player-controls-bottom-volumebar -->
      
      <div class="gg-player-controls-bottom-fullscreen">
        <button type="button" type="button" class="gg-player-controls-bottom-fullscreen-button">
        <svg viewBox="0 0 68 68" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M6.161,4H19.5c1.104,0,2-0.896,2-2s-0.896-2-2-2h-17C1.396,0,0,1.276,0,2.381v17c0,1.104,0.896,2,2,2s2-0.896,2-2V8.376l16.042,15.791c0.391,0.391,1.027,0.586,1.539,0.586s1.086-0.195,1.477-0.586c0.781-0.781,0.812-2.237,0.031-3.019L6.161,4z"/>
        <path d="M66.5,0h-17c-1.104,0-2,0.896-2,2s0.896,2,2,2h12.605L45.147,21.148c-0.781,0.781-0.781,2.142,0,2.923c0.39,0.391,0.902,0.633,1.414,0.633s0.774-0.171,1.164-0.562l16.274-16.5V19.38c0,1.104,0.896,2,2,2s2-0.896,2-2v-17C68,1.276,67.604,0,66.5,0z"/>
        <path d="M20.042,44.462L4,60.254V49.381c0-1.104-0.896-2-2-2s-2,0.896-2,2v17C0,67.485,1.396,68,2.5,68h17c1.104,0,2-0.896,2-2s-0.896-2-2-2H6.029L23.12,47.1c0.781-0.781,0.656-1.951-0.125-2.732C22.215,43.586,20.822,43.681,20.042,44.462z"/>
        <path d="M66,47.381c-1.104,0-2,0.896-2,2v11.606L47.726,44.462c-0.78-0.781-1.923-0.781-2.703,0c-0.781,0.781-0.719,1.856,0.062,2.638L62.237,64H49.5c-1.104,0-2,0.896-2,2s0.896,2,2,2h17c1.104,0,1.5-0.515,1.5-1.619v-17C68,48.276,67.104,47.381,66,47.381z"/>
        </svg>
        </button>
      </div>
      <!-- .gg-player-controls-bottom-fullscreen -->
      
      <div class="gg-player-controls-bottom-cinema">
        <button type="button" type="button" class="gg-player-controls-bottom-cinema-button">
        <svg viewBox="0 0 58 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="M36.537,28.156l-11-7c-0.308-0.195-0.698-0.208-1.019-0.033C24.199,21.299,24,21.635,24,22v14c0,0.365,0.199,0.701,0.519,0.877C24.669,36.959,24.834,37,25,37c0.187,0,0.374-0.053,0.537-0.156l11-7C36.825,29.66,37,29.342,37,29S36.825,28.34,36.537,28.156z M26,34.179V23.821L34.137,29L26,34.179z"/>
        <path d="M57,6H47H11H1C0.448,6,0,6.447,0,7v11v11v11v11c0,0.553,0.448,1,1,1h10h36h10c0.552,0,1-0.447,1-1V40V29V18V7C58,6.447,57.552,6,57,6z M10,28H2v-9h8V28z M2,30h8v9H2V30z M12,40V29V18V8h34v10v11v11v10H12V40z M56,28h-8v-9h8V28z M48,30h8v9h-8V30z M56,8v9h-8V8H56z M2,8h8v9H2V8z M2,50v-9h8v9H2z M56,50h-8v-9h8V50z"/>
        </svg>
        </button>
      </div>
      <!-- .gg-player-controls-bottom-cinema --> 
    </div>
    <!-- .gg-player-controls-bottom --> 
  </div>
  <!-- .gg-player-controls -->
  
  <div class="gg-player-overlay"></div>
</div>