Forked from MikeMcChillin/Full Height & width background video or image
Created
April 7, 2016 22:21
-
-
Save jordandobson/1873cfd592bc6d7eddd9e89f0b72f348 to your computer and use it in GitHub Desktop.
Full height background video / image from FiftyThree Paper
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
| Set inline width & height. | |
| Video, img alternative natural width & height: 1920 x 1080 | |
| 21mb video O_O | |
| http://codepen.io/MikeMcChillin/pen/wKGFz |
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
| $(function() { | |
| var $heroEl = Modernizr.touch ? $('img.alternative') : $('video'), | |
| $parent = $heroEl.parent(), | |
| $win = $(window), | |
| $popup = $('#videoPopup'), | |
| $mask = $('#toolsVideoShield'), | |
| heroAR = 16 / 9, | |
| vid; | |
| if (Modernizr.touch === false) { | |
| vid = $heroEl.get(0); | |
| // play the video when the browser is able and update the | |
| // video sources when the video ends | |
| $heroEl | |
| .on('canplaythrough', playVid) | |
| .on('ended', playVid) | |
| .click(function(e) { | |
| e.preventDefault(); | |
| $popup.click(); | |
| }); | |
| // pause the BG video when the video modal is loaded | |
| $popup.click(pauseVid); | |
| // play the BG video when the mask is clicked | |
| $mask.click(playVid); | |
| } | |
| // fit the hero element when the browser window is resized | |
| $win.resize(fitHeroEl); | |
| fitHeroEl(); | |
| playVid(); | |
| // fitHeroEl() | |
| // | |
| // Center the hero element (image|video) using CSS left/top properties. | |
| function fitHeroEl() { | |
| var parentW = $parent.width(), | |
| parentH = $parent.height(), | |
| newWidthHeight = {}, | |
| newPos = {}; | |
| if (parentW / parentH <= heroAR) { | |
| newWidthHeight.height = '100%'; | |
| newWidthHeight.width = 'auto'; | |
| } else { | |
| newWidthHeight.height = 'auto'; | |
| newWidthHeight.width = '100%'; | |
| } | |
| $heroEl.css(newWidthHeight); | |
| newPos.left = Math.min(0, (parentW - $heroEl.width()) / 2); | |
| newPos.top = Math.min(0, (parentH - $heroEl.height()) / 2); | |
| $heroEl.css(newPos); | |
| } | |
| // playVid() | |
| // | |
| // Play the BG video. | |
| function playVid() { | |
| $heroEl.removeAttr('poster'); | |
| fitHeroEl(); | |
| vid.play(); | |
| } | |
| // pauseVid() | |
| // | |
| // Pause the BG video. | |
| function pauseVid() { | |
| vid.pause(); | |
| } | |
| }); |
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
| html, | |
| body, | |
| height: 100% | |
| min-height: 100% | |
| .hero-wrap | |
| height: 100% | |
| min-height: 480px | |
| overflow: visible | |
| position: relative | |
| .hero-video | |
| width: 100% | |
| height: 100% | |
| overflow: hidden | |
| position: relative | |
| video, | |
| img.alternative | |
| position: absolute | |
| height: auto | |
| width: auto | |
| -webkit-user-select: none | |
| -moz-user-select: none | |
| -ms-user-select: none | |
| user-select: none | |
| z-index: 0 | |
| .touch .hero-video video, | |
| .no-touch .hero-video img.alternative | |
| display: none | |
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
| <html> | |
| <body> | |
| <div class="hero-wrap"> | |
| <div class="hero-video"> | |
| <video width="1280" height="720"> | |
| <source src="http://www.fiftythree.com/assets/video/pencil/pencil-home.mp4" type="video/mp4" data-format="mp4"> | |
| <source src="http://www.fiftythree.com/assets/video/pencil/pencil-home.webm" type="video/webm" data-format="webm"> | |
| <source src="http://www.fiftythree.com/assets/video/pencil/pencil-home.ogv" type="video/ogg" data-format="ogv"> | |
| </video> | |
| <img src="http://www.fiftythree.com/assets/images/pencil/connect.jpg" width="1280" height="720" class="alternative"> | |
| <h1 id="logo"><img src="img/logo.svg" alt=""></h1> | |
| <h3 class="headline">This is a headline overlayed on the video</h3> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment