<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;
}
}
}