A Pen by Stan Williams on CodePen.
Created
June 15, 2017 01:35
-
-
Save stanwmusic/59611a7bd54ce14be9a9e5c4848ecb46 to your computer and use it in GitHub Desktop.
Responsive header video demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="header-video" style="width: 1349px; height: 318px;"> | |
<img src="http://zerosixthree.se/labs/video-header/img/masthead.jpg" class="header-video__media" data-video-url="https://www.youtube.com/embed/Scxs7L0vhZ4" data-teaser="video/teaser-video" data-video-width="560" data-video-height="315"> | |
<!-- <a href="https://www.youtube.com/embed/Scxs7L0vhZ4" class="header-video__play-trigger" id="header-video__play-trigger" style="display: block;">Play video__</a> ---> | |
<button type="button" class="header-video__close-trigger" id="header-video__close-trigger" style="display: none;">Close video</button> | |
<video autoplay="true" loop="true" muted="" id="header-video__teaser-video" class="header-video__teaser-video"><source src="video/teaser-video.webm" type="video/mp4"><source src="http://zerosixthree.se/labs/video-header/video/teaser-video.mp4" type="video/mp4"></video></div> | |
<div class="container"> | |
<h1>Responsive header video demo.</h1> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, accusamus, eius aperiam velit modi obcaecati aliquid fugiat quisquam corporis consequatur neque nemo magnam quas molestias nostrum ex a voluptatibus consectetur praesentium pariatur nobis tempore hic ea mollitia in illum deserunt accusantium natus distinctio quae magni reprehenderit alias ipsa rerum quos. | |
</p> | |
<p> | |
Ipsum dolor sit amet, consectetur adipisicing elit. Culpa, voluptatum, veritatis, laudantium officia maxime tempora molestias est sunt iure vel blanditiis reprehenderit repellat amet dolorem eaque alias beatae nihil aliquid officiis possimus labore consectetur neque dolorum itaque libero accusantium odio. | |
</p> | |
<h2>Lorem ipsum</h2> | |
<p> | |
Consectetur adipisicing elit. Molestias, molestiae, asperiores iure ducimus itaque delectus quasi! Qui, deleniti, harum, magni blanditiis quasi reprehenderit earum quam tempore asperiores exercitationem dignissimos accusantium ipsam laudantium animi possimus ducimus pariatur provident numquam eveniet reiciendis. Libero, rem pariatur quos nobis cupiditate mollitia hic sunt totam. | |
</p> | |
<p> | |
Dolor sit amet, consectetur adipisicing elit. Voluptas accusamus delectus explicabo officia laboriosam. Distinctio, laudantium minima hic corrupti libero! | |
</p> | |
<h2>Dolor sit amet</h2> | |
<p> | |
Ipsum, tempore, itaque dolorum sint reiciendis mollitia sed aperiam fugit est dolorem quos asperiores laborum veniam. In earum ut porro omnis veniam pariatur quaerat architecto atque itaque? | |
</p> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
$('.header-video').each(function(i, elem) { | |
headerVideo = new HeaderVideo({ | |
element: elem, | |
media: '.header-video__media', | |
playTrigger: '.header-video__play-trigger', | |
closeTrigger: '.header-video__close-trigger' | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> | |
<script src="http://zerosixthree.se/labs/video-header/js/script.js?v1.2"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.header-video { | |
position: relative; | |
overflow: hidden; | |
} | |
.header-video iframe, | |
.header-video video { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
} | |
.header-video iframe { | |
height: 100%; | |
width: 100%; | |
} | |
.header-video video { | |
width: 100%; | |
} | |
.header-video__teaser-video { | |
width: 100%; | |
height: auto; | |
} | |
.header-video__media { | |
width: 100%; | |
height: auto; | |
} | |
* { | |
margin: 0; | |
padding: 0; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
body { | |
font-family: 'Source Sans Pro', sans-serif; | |
font-weight: 400; | |
font-size: 100%; | |
} | |
p { | |
font-size: 1.2em; | |
margin-bottom: 1em; | |
} | |
h1, h2, h3 { | |
font-weight: 700; | |
margin-bottom: .35em; | |
} | |
h1 { | |
font-size: 3em; | |
line-height: 1; | |
} | |
h2 { | |
font-size: 2em; | |
margin-top: 1em; | |
} | |
.header-video__play-trigger { | |
z-index: 5; | |
position: absolute; | |
background: rgba(0,0,0,.3); | |
text-align: center; | |
color: white; | |
text-decoration: none; | |
padding: 1.5em 3em; | |
z-index: 5; | |
left: 50%; | |
top: 50%; | |
border-radius: 10px; | |
-webkit-transform: translate(-50%, -50%); | |
-moz-transform: translate(-50%, -50%); | |
transform: translate(-50%, -50%); | |
-webkit-transition: background .5s; | |
-moz-transition: background .5s; | |
transition: background .5s; | |
} | |
.header-video__play-trigger:hover { | |
background: rgba(0,0,0,.5); | |
} | |
.header-video__close-trigger { | |
z-index: 99; | |
position: absolute; | |
background: #A61212; | |
text-align: center; | |
color: white; | |
text-decoration: none; | |
padding: 2em 3em; | |
border-radius: 10px; | |
right: 30px; | |
top: 30px; | |
-webkit-transition: background .3s; | |
-moz-transition: background .3s; | |
transition: background .3s; | |
border: none; | |
} | |
.header-video__close-trigger:hover { | |
background: #363636; | |
cursor: pointer; | |
} | |
.container { | |
margin: 0 auto; | |
max-width: 1200px; | |
padding: 10em 2em 10em 2em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Preview here: https://codepen.io/Stanssongs/full/KqgEWz/