Last active
August 31, 2015 15:00
-
-
Save MikSDigital/422b9d35c5fe72aa3e63 to your computer and use it in GitHub Desktop.
Full Screen Video Background with minimal code. Coded with SASS and Coffee Script Requires jQuery!
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="bg-video"> | |
<video loop autoplay> | |
<!-- Insert your video below --> | |
<source src="" type="video/mp4"></source> | |
</video> | |
</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 -> | |
# The video element | |
video = $('.bg-video video') | |
# Ratio of the elements dimensions | |
ratio = video.width() / video.height() | |
# Background Video | |
$(window).on 'load scroll resize', -> | |
# If the height multiplied by the raio is larger than the window width | |
if $(window).height() * ratio > $(window).width() | |
# Give the video the width of the window height multiplied by the ratio | |
video.width( $(window).height() * ratio ) | |
else | |
# Else give it the window width | |
video.width( $(window).width() ) |
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
.bg-video { | |
video { | |
position: fixed; // Fixed position | |
z-index: -1; // Overlay items on top of it | |
width: 100%; // Fallback, jQuery or JS doesn't load | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment