Join the change

Space makes you look at things from a different perspectives.

HTML:

          
            <!-- Hero Section -->
            <div class="gradient-overlay-half-dark-video-v1 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img5.jpg);">
              <!-- Video Background -->
              <div class="js-bg-video d-none d-md-block position-absolute w-100 h-100"
                   data-hs-bgv-type="youtube"
                   data-hs-bgv-id="0qisGSwZym4"
                   data-hs-bgv-loop="true">
              </div>
              <!-- End Video Background -->

              <div class="position-relative z-index-2">
                <!-- Main Content -->
                <div class="d-lg-flex align-items-lg-center height-85vh--lg">
                  <div class="container space-3 space-0--lg mt-lg-9">
                    <div class="row align-items-lg-center">
                      <div class="col-lg-9 mb-9 mb-lg-0">
                        <!-- Title -->
                        <div class="mb-7">
                          <h1 class="display-4 font-size-48--md-down text-white">Join the change</h1>
                          <p class="lead text-white font-weight-light">Space makes you look at things from a different perspectives.</p>
                        </div>
                        <!-- End Title -->

                        <!-- Form -->
                        <form class="js-validate w-lg-80">
                          <div class="row mx-gutters-2">
                            <div class="col-sm-4 mb-3">
                              <!-- Input -->
                              <div class="js-form-message">
                                <div class="js-focus-state input-group form">
                                  <input type="text" class="form-control form__input" name="username" required
                                         placeholder="Name"
                                         aria-label="Name"
                                         data-msg="Name must contain only letters.">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-sm-4 mb-3">
                              <!-- Input -->
                              <div class="js-form-message">
                                <div class="js-focus-state input-group form">
                                  <input type="email" class="form-control form__input" name="email" required
                                         placeholder="Email"
                                         aria-label="Email"
                                         data-msg="Please enter a valid email address.">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-sm-4 mb-3">
                              <button type="submit" class="btn btn-block btn-primary">Get Started</button>
                            </div>
                          </div>

                          <!-- Checkbox -->
                          <div class="custom-control custom-checkbox d-flex align-items-center text-white">
                            <input type="checkbox" class="custom-control-input" id="termsCheckbox">
                            <label class="custom-control-label text-light-70" for="termsCheckbox">
                              I agree to the
                              <a class="text-white" href="terms.html">Terms and Conditions</a>
                            </label>
                          </div>
                          <!-- End Checkbox -->
                        </form>
                        <!-- End Form -->
                      </div>

                      <div class="col-lg-3 text-center">
                        <!-- Fancybox -->
                        <a class="js-fancybox u-media-player" href="javascript:;"
                           data-src="//vimeo.com/167434033"
                           data-speed="700"
                           data-animate-in="zoomIn"
                           data-animate-out="zoomOut"
                           data-caption="Space - Responsive Website Template">
                          <span class="u-media-player__icon u-media-player__icon--xl">
                            <span class="fa fa-play u-media-player__icon-inner"></span>
                          </span>
                        </a>
                        <!-- End Fancybox -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Main Content -->

                <!-- Bottom Content -->
                <div class="d-lg-flex align-items-lg-center height-15vh--lg">
                  <div class="container space-1 space-0--lg">
                    <div class="row align-items-sm-center">
                      <div class="col-sm-8 mb-3 mb-sm-0">
                        <!-- Button -->
                        <button type="button" class="btn btn-xs btn-light text-left mb-2 mb-md-0 mr-md-2">
                          <span class="media align-items-center">
                            <span class="fab fa-apple fa-3x mr-3"></span>
                            <span class="d-block">
                              <span class="d-block">Download on the</span>
                              <strong class="d-block font-size-14">App Store</strong>
                            </span>
                          </span>
                        </button>
                        <!-- End Button -->

                        <!-- Button -->
                        <button type="button" class="btn btn-xs btn-light text-left mb-2 mb-md-0">
                          <span class="media align-items-center">
                            <span class="fab fa-google-play fa-3x mr-3"></span>
                            <span class="d-block">
                              <span class="d-block">Get it on</span>
                              <strong class="d-block font-size-14">Google Play</strong>
                            </span>
                          </span>
                        </button>
                        <!-- End Button -->
                      </div>

                      <div class="col-sm-4 text-sm-right">
                        <a class="js-go-to text-white" href="javascript:;"
                           data-target="#featuresContent"
                           data-type="static">
                          Learn more
                          <span class="fa fa-arrow-down font-size-14 ml-2"></span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Bottom Content -->
              </div>
            </div>
            <!-- End Hero Section -->
          
        

CSS library:

        
          <link rel="stylesheet" href="assets/vendor/hs-bg-video/hs-bg-video.css">
          <link rel="stylesheet" href="assets/vendor/slick-carousel/slick/slick.css">
          <link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
        
      

JS library and initialization:

        
          <!-- JS Implementing Plugins -->
          <script src="assets/vendor/hs-bg-video/hs-bg-video.js"></script>
          <script src="assets/vendor/hs-bg-video/vendor/player.min.js"></script>
          <script src="assets/vendor/slick-carousel/slick/slick.js"></script>
          <script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>

          <!-- JS Implementing Plugins -->
          <script src="assets/js/helpers/hs.bg-video.js"></script>
          <script src="assets/js/components/hs.slick-carousel.js"></script>
          <script src="assets/js/components/hs.fancybox.js"></script>
          <script src="assets/js/components/hs.go-to.js"></script>

          <!-- JS Plugins Init. -->
          <script>
            $(document).on('ready', function () {
              // initialization of video on background
              $.HSCore.helpers.HSBgVideo.init('.js-bg-video');

              // initialization of slick carousel
              $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');

              // initialization of fancybox
              $.HSCore.components.HSFancyBox.init('.js-fancybox');

              // initialization of go to
              $.HSCore.components.HSGoTo.init('.js-go-to');
            });
          </script>