Video Player

Examples of video player components.

Video player #1

              
                <!-- Video Section -->
                <div class="container space-2">
                  <div class="row justify-content-sm-center">
                    <div class="col-lg-9 col-xl-8">
                      <!-- Video Block -->
                      <div id="youTubeVideoPlayerExample1" class="u-video-player">
                        <!-- Cover Image -->
                        <img class="img-fluid u-video-player__preview" src="../../assets/img/900x450/img2.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-video-id="0qisGSwZym4"
                           data-parent="youTubeVideoPlayerExample1"
                           data-is-autoplay="true"
                           data-target="youTubeVideoIframeExample1"
                           data-classes="u-video-player__played">
                          <span class="u-video-player__icon u-video-player__icon--lg text-primary">
                            <span class="fas fa-play u-video-player__icon-inner"></span>
                          </span>
                        </a>
                        <!-- End Play Button -->

                        <!-- Video Iframe -->
                        <div class="embed-responsive embed-responsive-16by9">
                          <div id="youTubeVideoIframeExample1"></div>
                        </div>
                        <!-- End Video Iframe -->
                      </div>
                      <!-- End Video Block -->
                    </div>
                  </div>
                </div>
                <!-- End Video Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/player.js/dist/player.min.js"></script>

                <!-- JS Implementing Plugins -->
                <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>
              
            

SVG blocks #2

Opportunity

Our core values

At Front, we don't just accept difference—we celebrate it, we support it, and we thrive on it for the benefit of our employees, our products, and our community.

  • Empathy
  • Courtesy
  • Thriving
  • Craftsmanship
  • Playfulness
  • Solidarity
              
                <!-- Core Values -->
                <div class="position-relative">
                  <div class="container space-2">
                    <div class="row align-items-center">
                      <div class="col-lg-5 mb-9 mb-lg-0">
                        <!-- Title -->
                        <div class="pr-lg-4 mb-7">
                          <span class="btn btn-xs btn-soft-success btn-pill mb-2">Opportunity</span>
                          <h2 class="text-primary">Our core
                            <span class="font-weight-semi-bold">values</span>
                          </h2>
                          <p>At Front, we don't just accept difference—we celebrate it, we support it, and we thrive on it for the benefit of our employees, our products, and our community.</p>
                        </div>
                        <!-- End Title -->

                        <div class="row">
                          <div class="col-sm-6">
                            <!-- List -->
                            <ul class="list-unstyled mb-0">
                              <li class="py-2">
                                <div class="media">
                                  <span class="btn btn-sm btn-icon btn-soft-danger rounded-circle mr-3">
                                    <span class="fas fa-heart btn-icon__inner"></span>
                                  </span>
                                  <div class="media-body">
                                    Empathy
                                  </div>
                                </div>
                              </li>
                              <li class="py-2">
                                <div class="media">
                                  <span class="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-3">
                                    <span class="fas fa-smile btn-icon__inner"></span>
                                  </span>
                                  <div class="media-body">
                                    Courtesy
                                  </div>
                                </div>
                              </li>
                              <li class="py-2">
                                <div class="media">
                                  <span class="btn btn-sm btn-icon btn-soft-success rounded-circle mr-3">
                                    <span class="fab fa-studiovinari btn-icon__inner"></span>
                                  </span>
                                  <div class="media-body">
                                    Thriving
                                  </div>
                                </div>
                              </li>
                            </ul>
                            <!-- End List -->
                          </div>

                          <div class="col-sm-6">
                            <!-- List -->
                            <ul class="list-unstyled mb-0">
                              <li class="py-2">
                                <div class="media">
                                  <span class="btn btn-sm btn-icon btn-soft-danger rounded-circle mr-3">
                                    <span class="fab fa-steam-symbol btn-icon__inner"></span>
                                  </span>
                                  <div class="media-body">
                                    Craftsmanship
                                  </div>
                                </div>
                              </li>
                              <li class="py-2">
                                <div class="media">
                                  <span class="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-3">
                                    <span class="fas fa-table-tennis btn-icon__inner"></span>
                                  </span>
                                  <div class="media-body">
                                    Playfulness
                                  </div>
                                </div>
                              </li>
                              <li class="py-2">
                                <div class="media">
                                  <span class="btn btn-sm btn-icon btn-soft-success rounded-circle mr-3">
                                    <span class="fab fa-slideshare btn-icon__inner"></span>
                                  </span>
                                  <div class="media-body">
                                    Solidarity
                                  </div>
                                </div>
                              </li>
                            </ul>
                            <!-- End List -->
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-7 position-relative">
                        <!-- Video Block -->
                        <div id="youTubeVideoPlayer" class="u-video-player mb-5">
                          <!-- Cover Image -->
                          <img class="img-fluid u-video-player__preview" src="../../assets/img/900x450/img5.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-video-id="0qisGSwZym4"
                             data-parent="youTubeVideoPlayer"
                             data-is-autoplay="true"
                             data-target="youTubeVideoIframe"
                             data-classes="u-video-player__played">
                            <span class="u-video-player__icon u-video-player__icon--lg text-primary">
                              <span class="fas fa-play u-video-player__icon-inner"></span>
                            </span>
                          </a>
                          <!-- End Play Button -->

                          <!-- Video Iframe -->
                          <div class="embed-responsive embed-responsive-16by9">
                            <div id="youTubeVideoIframe"></div>
                          </div>
                          <!-- End Video Iframe -->
                        </div>
                        <!-- End Video Block -->

                        <!-- SVG Background Shape -->
                        <div id="SVGbgShape" class="svg-preloader w-100 content-centered-y z-index-n1">
                          <figure class="ie-soft-triangle-shape">
                            <img class="js-svg-injector" src="../../assets/svg/components/soft-triangle-shape.svg" alt="Image Description"
                                 data-parent="#SVGbgShape">
                          </figure>
                        </div>
                        <!-- End SVG Background Shape -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Core Values -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
                <script src="../../assets/vendor/player.js/dist/player.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>
                <script src="../../assets/js/components/hs.video-player.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');

                    // initialization of video player
                    $.HSCore.components.HSVideoPlayer.init('.js-inline-video-player');
                  });
                </script>
              
            

Video player #3


Watch Front Video

Image Description
              
                <!-- Video Content Section -->
                <div id="SVGwave1BottomSMShape" class="svg-preloader position-relative">
                  <div class="bg-img-hero text-center space-4" style="background-image: url(../../assets/img/1920x800/img1.jpg);">
                    <!-- Fancybox -->
                    <a class="js-fancybox d-inline-block 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="fas fa-play u-media-player__icon-inner"></span>
                      </span>
                    </a>
                    <!-- End Fancybox -->
                    <br>
                    <h4 class="d-inline-block text-white mb-0">Watch Front Video</h4>
                  </div>

                  <!-- SVG Background -->
                  <figure class="position-absolute right-0 bottom-0 left-0">
                    <img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom-sm.svg" alt="Image Description"
                         data-parent="#SVGwave1BottomSMShape">
                  </figure>
                  <!-- End SVG Background Section -->
                </div>
                <!-- End Video Content -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

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

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });

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

Video player #4


Watch Front Video

Image Description
Image Description
              
                <!-- Video Content Section -->
                <div id="SVGwave2Shape" class="svg-preloader position-relative">
                  <!-- Video Content -->
                  <div class="bg-img-hero text-center space-4" style="background-image: url(../../assets/img/1920x800/img4.jpg);">
                    <!-- Fancybox -->
                    <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="fas fa-play u-media-player__icon-inner"></span>
                      </span>
                    </a>
                    <!-- End Fancybox -->
                    <br>
                    <h4 class="d-inline-block text-white mb-0">Watch Front Video</h4>
                  </div>
                  <!-- End Video Content Section -->

                  <!-- SVG Top Shape -->
                  <figure class="position-absolute top-0 right-0 left-0">
                    <img class="js-svg-injector" src="../../assets/svg/components/wave-2-top.svg" alt="Image Description"
                         data-parent="#SVGwave2Shape">
                  </figure>
                  <!-- End SVG Top Shape -->

                  <!-- SVG Bottom Shape -->
                  <figure class="position-absolute right-0 bottom-0 left-0">
                    <img class="js-svg-injector" src="../../assets/svg/components/wave-2-bottom.svg" alt="Image Description"
                         data-parent="#SVGwave2Shape">
                  </figure>
                  <!-- End SVG Bottom Shape -->
                </div>
                <!-- Video Content Section -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

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

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });

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

Video player #5

  • Responsive design

    Responsive design has grown from a preference to a necessity.

  • Hosting

    We know that business never stops, and neither should your website.

  • Search engine optimization

    Improve your website's ranking in search results with our comprehensive SEO packages and services.

              
                <!-- Services Section -->
                <div class="container">
                  <div class="row justify-content-md-between align-items-center">
                    <div class="col-md-6 col-lg-5 mb-7 mb-md-0">
                      <ul class="list-unstyled u-indicator-vertical-dashed pr-md-4">
                        <!-- Info -->
                        <li class="media u-indicator-vertical-dashed-item">
                          <span class="btn btn-xs btn-icon btn-primary rounded-circle mr-3">
                            <span class="fas fa-check btn-icon__inner"></span>
                          </span>
                          <div class="media-body mt-n1">
                            <h3 class="h5 text-primary">Responsive design</h3>
                            <p>Responsive design has grown from a preference to a necessity.</p>
                          </div>
                        </li>
                        <!-- End Info -->

                        <!-- Info -->
                        <li class="media u-indicator-vertical-dashed-item">
                          <span class="btn btn-xs btn-icon btn-primary rounded-circle mr-3">
                            <span class="fas fa-check btn-icon__inner"></span>
                          </span>
                          <div class="media-body mt-n1">
                            <h3 class="h5 text-primary">Hosting</h3>
                            <p>We know that business never stops, and neither should your website.</p>
                          </div>
                        </li>
                        <!-- End Info -->

                        <!-- Info -->
                        <li class="media u-indicator-vertical-dashed-item">
                          <span class="btn btn-xs btn-icon btn-primary rounded-circle mr-3">
                            <span class="fas fa-check btn-icon__inner"></span>
                          </span>
                          <div class="media-body mt-n1">
                            <h3 class="h5 text-primary">Search engine optimization</h3>
                            <p>Improve your website's ranking in search results with our comprehensive SEO packages and services.</p>
                          </div>
                        </li>
                        <!-- End Info -->
                      </ul>
                    </div>

                    <div id="SVGellipseMockup" class="col-md-6 svg-preloader">
                      <!-- Fancybox -->
                      <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="fas fa-play u-media-player__icon-inner"></span>
                       </span>
                      </a>
                      <!-- End Fancybox -->

                      <!-- SVG Mockup -->
                      <figure class="ie-ellipse-mockup">
                        <img class="js-svg-injector" src="../../assets/svg/illustrations/ellipse-mockup.svg" alt="Image Description"
                             data-img-paths='[
                               {"targetId": "#SVGellipseMockupImg1", "newPath": "../../assets/img/615x750/img3.jpg"}
                             ]'
                             data-parent="#SVGellipseMockup">
                      </figure>
                      <!-- End SVG Mockup -->
                    </div>
                  </div>
                </div>
                <!-- End Services Section -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

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

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });

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

Video player #6

              
                <!-- Our Story Section -->
                <div id="ourStorySection" class="svg-preloader container space-top-2">
                  <div class="w-lg-75 position-relative p-lg-9 mx-lg-auto">
                    <!-- Video Block -->
                    <div class="bg-white shadow rounded p-2">
                      <div class="height-400 bg-img-hero-center" style="background-image: url(../../assets/img/900x450/img11.jpg);">
                        <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--lg">
                            <span class="fas fa-play u-media-player__icon-inner mr-1"></span>
                          </span>
                        </a>
                      </div>
                    </div>
                    <!-- End Video Block -->

                    <!-- SVG Component -->
                    <div class="content-centered-y w-75 z-index-n1">
                      <figure class="ie-abstract-shapes-7">
                        <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-7.svg" alt="Image Description"
                             data-parent="#ourStorySection">
                      </figure>
                    </div>
                    <!-- End SVG Component -->
                  </div>
                </div>
                <!-- Our Story Section -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

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

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });

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