Skip to content

Instantly share code, notes, and snippets.

@MikSDigital
Last active August 31, 2015 15:00
Show Gist options
  • Save MikSDigital/422b9d35c5fe72aa3e63 to your computer and use it in GitHub Desktop.
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!
<div class="bg-video">
<video loop autoplay>
<!-- Insert your video below -->
<source src="" type="video/mp4"></source>
</video>
</div>
$(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() )
.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