Html Hero Video Section

hero.html

             <!-- Hero Section -->
              <div id="hero" class="has-image autoscroll">
                <div id="hero-styles">
                  <div id="hero-caption" class="reverse-parallax-onscroll">
                    <div class="inner">
                      <div class="hero-title">
                        <span>Dance Room</span>
                      </div>
                      <div class="hero-subtitle">Video</div>
                    </div>
                  </div>
                  <div id="hero-footer">
                    <div class="hero-footer-left">
                      <div class="button-wrap left disable-drag scroll-down">
                        <div class="icon-wrap parallax-wrap">
                          <div class="button-icon parallax-element">
                            <i class="fa fa-angle-down"></i>
                          </div>
                        </div>
                        <div class="button-text sticky left">
                          <span data-hover="Scroll or drag to navigate">Scroll or drag to navigate</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="hero-image-wrapper">
                <div id="hero-background-layer" class="parallax-scroll-effect">
                  <div id="hero-bg-image" style="background-image:url(http://clapat.ro/themes/colega-wordpress/wp-content/uploads/2020/06/04hero.jpg)">
                    <div class="hero-video-wrapper">
                      <video loop muted class="bgvid">
                        <source src="http://clapat.ro/themes/colega/images/danceroom.mp4" type="video/mp4">
                        <source src="http://clapat.ro/themes/colega/images/danceroom.webm" type="video/webm">
                      </video>
                    </div>
                  </div>
                </div>
              </div>
              <!--/Hero Section -->