Video Player

Examples of video player components.

Video player #1

HTML:

            
              <div id="video" class="u-video-player">
                <img class="img-fluid u-video-player__preview" src="../assets/img/900x450/img2.jpg" alt="Image">

                <a class="js-classes-toggle u-video-player__btn u-video-player__centered" href="javascript:;"
                   data-target="#video"
                   data-classes="u-video-player__played">
                  <span class="u-video-player__icon u-video-player__icon--lg text-primary">
                    <span class="fa fa-play u-video-player__icon-inner"></span>
                  </span>
                </a>

                <div class="embed-responsive embed-responsive-16by9">
                  <iframe id="youTubeVideo" class="embed-responsive-item"
                          data-src="//www.youtube.com/embed/0qisGSwZym4?autoplay=1&showinfo=0&rel=0">
                  </iframe>
                </div>
              </div>
            
          

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="assets/js/helpers/hs.video-player.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(function () {
                  // initialization of slick carousels
                  $.HSCore.components.HSVideoPlayer.init('.js-classes-toggle', {
                    oneClick: function() {
                      $('#youTubeVideo').attr('src', $('#youTubeVideo').data('src'));
                    }
                  });
                });
              </script>
            
          

Video player #2

HTML:

            
              <div class="position-relative">
                <div id="video2" class="u-video-player">
                  <img class="img-fluid u-video-player__preview" src="../assets/img/900x450/img5.jpg" alt="Image">

                  <a class="js-classes-toggle-2 u-video-player__btn u-video-player__centered" href="javascript:;"
                     data-target="#video2"
                     data-classes="u-video-player__played">
                    <span class="u-video-player__icon u-video-player__icon--lg text-primary">
                      <span class="fa fa-play u-video-player__icon-inner"></span>
                    </span>
                  </a>

                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="vimeoVideo" class="embed-responsive-item"
                            data-src="//www.youtube.com/embed/0qisGSwZym4?autoplay=1&showinfo=0&rel=0">
                    </iframe>
                  </div>
                </div>

                <figure class="w-100 u-content-centered z-index-minus-1">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                       viewBox="0 0 1109.8 797.1" style="enable-background:new 0 0 1109.8 797.1;" xml:space="preserve">
                    <path class="u-fill-primary" opacity=".1" d="M105.1,267.1C35.5,331.5-3.5,423,0.3,517.7c5.8,145.3,110.7,314.2,588,273.1c753-64.7,481.3-358.3,440.4-398.3
                      c-4-3.9-7.9-7.9-11.7-12L761.9,104.8C639.4-27.6,432.5-35.6,299.9,87L105.1,267.1z"/>
                  </svg>
                </figure>
              </div>
            
          

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="assets/js/helpers/hs.video-player.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(function () {
                  // initialization of slick carousels
                  $.HSCore.components.HSVideoPlayer.init('.js-classes-toggle', {
                    oneClick: function() {
                      $('#vimeoVideo').attr('src', $('#vimeoVideo').data('src'));
                    }
                  });
                });
              </script>
            
          

Video player #3


Watch Front Video

HTML:

            
              <div class="position-relative">
                <div class="u-bg-img-hero text-center u-space-4" style="background-image: url(../assets/img/1920x800/img1.jpg);">
                  <a class="js-fancybox u-media-player mb-4" href="javascript:;"
                     data-src="//vimeo.com/167434033"
                     data-speed="700"
                     data-animate-in="zoomIn"
                     data-animate-out="zoomOut"
                     data-caption="Front - Responsive Website Template">
                    <span class="u-media-player__icon u-media-player__icon--lg">
                      <span class="fa fa-play u-media-player__icon-inner"></span>
                    </span>
                  </a>
                  <br>
                  <h4 class="d-inline-block text-white mb-0">Watch Front Video</h4>
                </div>

                <figure class="position-absolute-bottom-0">
                  <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                       width="100%" height="140px" viewBox="20 -20 300 100" style="margin-bottom: -8px;" xml:space="preserve">
                    <path class="u-fill-white" opacity="0.4" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
                c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
                    <path class="u-fill-white" opacity="0.4" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
                c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
                    <path class="u-fill-white" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
                H42.401L43.415,98.342z" />
                    <path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
                c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
                  </svg>
                </figure>
              </div>
            
          

CSS library:

            
              <link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
            
          

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>

              <!-- JS Implementing Plugins -->
              <script src="assets/js/components/hs.fancybox.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(document).on('ready', function () {
                  // initialization of popups
                  $.HSCore.components.HSPopup.init('.js-fancybox');
                });
              </script>
            
          

Video player #4


Watch Front Video

HTML:

            
              <div class="position-relative">
                <div class="u-bg-img-hero text-center u-space-4" style="background-image: url(../assets/img/1920x800/img4.jpg);">
                  <a class="js-fancybox u-media-player mb-4" href="javascript:;"
                     data-src="//vimeo.com/167434033"
                     data-speed="700"
                     data-animate-in="zoomIn"
                     data-animate-out="zoomOut"
                     data-caption="Front - Responsive Website Template">
                    <span class="u-media-player__icon u-media-player__icon--lg">
                      <span class="fa fa-play u-media-player__icon-inner"></span>
                    </span>
                  </a>
                  <br>
                  <h4 class="d-inline-block text-white mb-0">Watch Front Video</h4>
                </div>

                <figure class="w-100 position-absolute-top-0">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                       viewBox="0 0 1920 125.7" style="margin-top: -8px; margin-bottom: 0; enable-background:new 0 0 1920 125.7;" xml:space="preserve">
                    <path class="u-fill-white" d="M1920,0v44.2c0,0-451,63.8-960,6.3S0,125.7,0,125.7L0,0L1920,0z"/>
                  </svg>
                </figure>

                <figure class="w-100 position-absolute-bottom-0">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                       viewBox="0 0 1920.5 248.5" style="margin-bottom: -8px; enable-background:new 0 0 1920.5 248.5;" xml:space="preserve">
                    <path class="u-fill-white" d="M0.5,248.5v-44.2c0,0,451-63.8,960-6.3s960-75.1,960-75.1v125.7H0.5z"/>
                  </svg>
                </figure>
              </div>
            
          

CSS library:

            
              <link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
            
          

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>

              <!-- JS Implementing Plugins -->
              <script src="assets/js/components/hs.fancybox.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(document).on('ready', function () {
                  // initialization of popups
                  $.HSCore.components.HSPopup.init('.js-fancybox');
                });
              </script>
            
          

Video player #5

HTML:

            
              <a class="js-fancybox u-media-player u-media-player--centered" href="javascript:;"
                 data-src="//vimeo.com/167434033"
                 data-speed="700"
                 data-animate-in="zoomIn"
                 data-animate-out="zoomOut"
                 data-caption="Front - Responsive Website Template">
               <span class="u-media-player__icon u-media-player__icon--xl text-primary">
                <span class="fa fa-play u-media-player__icon-inner"></span>
               </span>
              </a>

              <figure>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 614.8 747.7" style="enable-background:new 0 0 614.8 747.7;" xml:space="preserve">
                  <path class="u-fill-primary" opacity=".05" d="M186.9,138.9C125.8,144.5,69.7,176,34.4,226c-54.3,76.8-67.1,204.7,193.8,371.7c411.5,263.5,387.9,6,382.7-30.6
                    c-0.5-3.6-0.9-7.2-1.3-10.7l-22.1-241.9C576.8,198.3,474,112.7,357.7,123.3L186.9,138.9z"/>
                  <g>
                    <defs>
                      <path id="mockup1" d="M168.6,729.7L168.6,729.7c135.8,53,290.2-14.8,343.2-150.6l85-217.9C649.8,225.4,582,71,446.2,18l0,0
                        C310.4-34.9,156,32.8,103,168.6L18,386.5C-34.9,522.3,32.8,676.7,168.6,729.7z"/>
                    </defs>
                    <clipPath id="mockup2">
                      <use xlink:href="#mockup1"  style="overflow:visible;"/>
                    </clipPath>
                    <g style="clip-path:url(#mockup2);">
                      <!-- Apply your (615px width to 750px height) image here -->
                      <image style="overflow:visible;" width="615" height="750" xlink:href="../assets/img/615x750/img3.jpg"  transform="matrix(1 0 0 1 -0.1366 -0.9532)"></image>
                    </g>
                  </g>
                  <circle class="u-fill-danger" cx="126.3" cy="693.8" r="16.3"/>
                  <circle class="u-fill-success" cx="132.9" cy="632.6" r="10.6"/>
                  <circle class="u-fill-primary" cx="77" cy="655.9" r="21.6"/>
                  <circle class="u-fill-warning" cx="38.8" cy="708.1" r="3.9"/>
                </svg>
              </figure>
            
          

CSS library:

            
              <link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
            
          

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>

              <!-- JS Implementing Plugins -->
              <script src="assets/js/components/hs.fancybox.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(document).on('ready', function () {
                  // initialization of popups
                  $.HSCore.components.HSPopup.init('.js-fancybox');
                });
              </script>