Video Player

Examples of video player components.

Video player #1

HTML:

              
                <!-- Video Section -->
                <div class="container">
                  <div class="row justify-content-sm-center text-center">
                    <div class="col-lg-9 col-xl-8">
                      <!-- Video Block -->
                      <div id="video" class="u-video-player">
                        <!-- Cover Image -->
                        <img class="img-fluid u-video-player__preview" src="../assets/img/900x450/img1.jpg" alt="Image">
                        <!-- End Cover Image -->

                        <!-- Play Button -->
                        <a class="js-inline-video-player 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">
                            <span class="fa fa-play u-video-player__icon-inner"></span>
                          </span>
                        </a>
                        <!-- End Play Button -->

                        <!-- Video Iframe -->
                        <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>
                        <!-- End Video Iframe -->
                      </div>
                      <!-- End Video Block -->
                    </div>
                  </div>
                </div>
                <!-- End Video Section -->

JS library and initialization:

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

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