Cacher is the code snippet organizer for pro developers

<div class="homepage-hero-module">
          <div class="video-container">
            <div class="filter"></div>
            <div class="hidden-xs embed-responsive embed-responsive-16by9">
              <video autoplay loop class="fillWidth embed-responsive-item">
                <source src="<?php echo get_template_directory_uri(); ?>/video/saga_website_hero_bw.mp4" type="video/mp4" />
                <source src="<?php echo get_template_directory_uri(); ?>/video/saga_website_hero_bw.ogv" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
                <source src="<?php echo get_template_directory_uri(); ?>/video/saga_website_hero_bw.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
              </video>
            </div><!-- .embed-responsive -->
            <div class="visible-xs poster"></div>
            <div id="header-content">
              <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 text-center">
                  <h2 class="h1"><?php the_field( 'header_title'); ?></h2>
                    <p>
                        <?php 
                            $header_message = get_post_meta( get_the_ID(), 'header_message', true );
                            // check if the custom field has a value
                            if( ! empty( $header_message ) ) {
                              echo $header_message;
                            } 
                        ?>
                    </p>
                </div> <!-- end .col-md-8 -->
              </div> <!-- end .row -->
            </div><!-- #header-content -->
          </div><!-- video-container -->
        </div><!-- .homepage-hero-module -->

/* Homepage Video Hero
-----------------------------------------*/
.homepage-hero-module {
  border-right: none;
  border-left: none;
  position: relative;
}

.video-container {
  position: relative;
  overflow: hidden;
  background: #000;
  @media only screen and (min-width: $break-xs) {
      background: url(images/saga_website_hero_placeholder.jpg) no-repeat top center;
      background-size: cover;
  }
}

.video-container .filter {
  z-index: 100;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%
}

.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
}

.video-container video.fillWidth {
  width: 100%;
}

.poster {
  min-height: 500px;
}

#header-content {
  text-align: center;
  position: absolute;
  top: 34%;
  z-index: 999;
  @media only screen 
    and (min-width: $break-xs)
    and (max-width: $break-sm) {
      top: 5%;
      padding: 5%;
  }

  // @media only screen and (min-width: $break-sm) {
  //   top: 10%;
  //   padding: 10%;
  // }

  h2 {
    color: #fafafa;
    
    @media screen and (max-width: $break-sm) {
      font-size: 36px;
    }
    @media screen and (max-width: $break-xs) {
      font-size: 24px;
    }

  }
  p {
    font-size: 25px;
    color: #fff;
    text-shadow: 1px 1px 0px #666;
    
    @media screen and (max-width: $break-sm) {
      font-size: 18px;
    }
    @media screen and (max-width: $break-xs) {
      font-size: 18px;
    }
  }

}