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="videoSection" class="u-video-player">
                        <!-- Cover Image -->
                        <img class="img-fluid u-video-player__preview" src="../assets/img/900x450/img1.jpg" alt="Image Description">
                        <!-- End Cover Image -->

                        <!-- Play Button -->
                        <a class="js-inline-video-player u-video-player__btn u-video-player__centered" href="javascript:;"
                           data-parent="videoSection"
                           data-target="youTubeVideo"
                           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/vendor/player.js/dist/player.min.js"></script>

              <!-- JS Space -->
              <script src="../../assets/js/components/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>

Video player #2

HTML:

              
                <!-- Video Player Section -->
                <a class="js-fancybox d-block text-center bg-img-hero" href="javascript:;" style="background-image: url(../assets/img/1920x800/img8.jpg);"
                   data-src="//vimeo.com/167434033"
                   data-speed="700"
                   data-animate-in="zoomIn"
                   data-animate-out="zoomOut"
                   data-caption="Space - Responsive Website Template">
                  <span class="d-inline-block u-media-player space-4">
                    <span class="u-media-player__icon u-media-player__icon--xl u-media-player__icon--primary">
                      <span class="fa fa-play u-media-player__icon-inner"></span>
                    </span>
                  </span>
                </a>
                <!-- End Video Player Section -->

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 Space -->
              <script src="../../assets/js/components/hs.fancybox.js"></script>

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

Video player #3

A complete website solution.

Space offers customers an all-inclusive website solution to help them save time, money, and operational resources. Space makes you look at things from a different perspectives.

Sign up for a 14-day trial

HTML:

              
                <!-- Features Section -->
                <div class="container">
                  <div class="row align-items-md-center">
                    <div class="col-md-5 mb-9 mb-md-0">
                      <div class="pr-lg-4">
                        <!-- Title -->
                        <div class="mb-4">
                          <h2 class="h3">A complete website solution.</h2>
                          <p>Space offers customers an all-inclusive website solution to help them save time, money, and operational resources. Space makes you look at things from a different perspectives.</p>
                        </div>
                        <!-- End Title -->

                        <a href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">
                          Sign up for a 14-day trial
                          <span class="fa fa-angle-right ml-2"></span>
                        </a>
                      </div>
                    </div>

                    <div class="col-md-7">
                      <!-- Video Block -->
                      <div id="youTubeVideoPlayer" class="u-video-player">
                        <!-- Cover Image -->
                        <img class="img-fluid u-video-player__preview" src="../assets/img/900x450/img9.jpg" alt="Image Description">
                        <!-- End Cover Image -->

                        <!-- Play Button -->
                        <a class="js-inline-video-player u-video-player__btn u-video-player__centered" href="javascript:;"
                           data-parent="youTubeVideoPlayer"
                           data-target="youTubeVideoIframe"
                           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="youTubeVideoIframe" class="embed-responsive-item" 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 Features Section -->

JS library and initialization:

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

              <!-- JS Space -->
              <script src="../../assets/js/components/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>