Do business with Space

Space makes you look at things from a different perspectives with fast, reliable & easy-to-use features. Free to try, quick to sign up.

Get Started with Space

HTML:

          
            <!-- Hero Section -->
            <div class="container space-2 space-4-top--lg space-3-bottom--lg">
              <div class="row align-items-lg-center">
                <div class="col-lg-5 mb-9 mb-lg-0">
                  <div class="pr-lg-4">
                    <!-- Title -->
                    <div class="mb-5">
                      <h1>Do business with Space</h1>
                      <p>Space makes you look at things from a different perspectives with fast, reliable & easy-to-use features. Free to try, quick to sign up.</p>
                    </div>
                    <!-- End Title -->

                    <!-- Pricing -->
                    <div class="card-deck card-sm-gutters-2">
                      <div class="card border-0">
                        <div class="card-body p-0">
                          <div class="custom-control custom-radio custom-control-inline form-selector-modern">
                            <input type="radio" id="productShippingSelector1" class="custom-control-input form-selector-modern__input" name="productShippingSelector" checked>
                            <label class="custom-control-label form-selector-modern__label" for="productShippingSelector1">
                              <span class="d-block mt-n1">
                                <span class="h3 d-inline-block text-primary mb-1">$49</span>
                                <small class="text-secondary">/ month</small>
                              </span>
                              <small class="d-block text-muted">All core features you need to track your expenses</small>
                            </label>
                          </div>
                        </div>
                      </div>

                      <div class="card border-0">
                        <div class="card-body p-0">
                          <div class="custom-control custom-radio custom-control-inline form-selector-modern">
                            <input type="radio" id="productShippingSelector2" class="custom-control-input form-selector-modern__input" name="productShippingSelector">
                            <label class="custom-control-label form-selector-modern__label" for="productShippingSelector2">
                              <span class="d-block mt-n1">
                                <span class="h3 d-inline-block text-primary mb-1">$69</span>
                                <small class="text-secondary">/ month</small>
                              </span>
                              <small class="d-block text-muted">Create the perfect flow for your growing business</small>
                            </label>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Pricing -->

                    <a class="btn btn-block btn-primary" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started with Space</a>
                  </div>
                </div>

                <div class="col-lg-7">
                  <!-- Video Block -->
                  <div class="bg-white shadow rounded p-2">
                    <div id="youTubeVideoPlayer" class="u-video-player">
                      <!-- Cover Image -->
                      <img class="img-fluid u-video-player__preview" src="../../assets/img/900x450/img4.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-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"></iframe>
                      </div>
                      <!-- End Video Iframe -->
                    </div>
                  </div>
                  <!-- End Video Block -->
                </div>
              </div>
            </div>
            <!-- End Hero 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>