Skip to content

Instantly share code, notes, and snippets.

@mwhiteley16
Created January 22, 2019 13:35
Show Gist options
  • Save mwhiteley16/395a75a1795a222b9524190c5e7cf22e to your computer and use it in GitHub Desktop.
Save mwhiteley16/395a75a1795a222b9524190c5e7cf22e to your computer and use it in GitHub Desktop.
Background Video PHP
/* ---------- 6.1 Hero Video ---------- */
.home .page-header {
padding: 24rem 0 7rem;
height: 75vh;
overflow: hidden;
}
#bgvid {
position: absolute;
top: 0;
left: 0;
right: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
}
.home .page-header h1 {
font-family: "Parisienne";
font-size: 100px;
font-size: 10rem;
}
.hero-subheader {
float: left;
width: 100%;
text-align: center;
margin-top: 35px;
color: #fff;
font-size: 20px;
font-size: 2rem;
font-weight: 400;
line-height: 2.8rem;
}
.home .page-header a.button {
margin-top: 35px;
background-color: #fff;
color: #42484e;
font-weight: 600;
border: 2px solid #fff;
}
.home .page-header a.button:hover {
background-color: #a5337d;
color: #fff;
}
@media (max-width: 1000px)
.home .page-header {
height: 100vh;
}
}
<?php
$wd_video_overlay_main_text = get_field( 'wd_video_overlay_main_text' );
$wd_video_overlay_sub_text = get_field( 'wd_video_overlay_sub_text' );
$wd_video_overlay_button = get_field( 'wd_video_overlay_button' );
?>
<div class="page-header">
<video id="bgvid" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline" poster="<?php echo get_home_url(); ?>/wp-content/uploads/2018/10/encore-hero-poster.jpg">
<source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/encore-hero.webm" type='video/webm'>
<source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/encore-hero.mp4" type='video/mp4'>
</video>
<div class="wrap">
<?php if( $wd_video_overlay_main_text ) : ?>
<h1 class="entry-title" itemprop="headline"><?php echo $wd_video_overlay_main_text; ?></h1>
<?php endif; ?>
<?php if( $wd_video_overlay_sub_text ) : ?>
<span class="hero-subheader"><?php echo $wd_video_overlay_sub_text; ?></span>
<?php endif; ?>
<?php if ( $wd_video_overlay_button ) : ?>
<a class="button" href="<?php echo $wd_video_overlay_button['url']; ?>" target="<?php echo $wd_video_overlay_button['target']; ?>"><?php echo $wd_video_overlay_button['title']; ?></a>
<?php endif; ?>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment