Adding HTML5 Video Background to Your Genesis Theme

Adding HTML5 Video Background to Your Genesis Theme

header

I’ve been working on a website for a friend of mine for some time now – tallbox.design. He’s a really tallented Bulgarian interior designer and that site has been a pleasure to work on.

I wanted to replace the top background image with an HTML video. As you probably know, I pay great attention to site speed, so I wanted to load that video after the entire page is loaded.

It worked great, adding the following JavaScript in the theme footer:

<script>
jQuery(document).ready( function() {
width = window.innerWidth;
if (width >= 1200) {
var activeSlide = jQuery('#fullwidth_slider .item.active');
jQuery('<video id="startVid" src="/link/to/video.mp4" autoplay muted loop />').appendTo(activeSlide);
}
});
</script>

As you can see, it waits for the page to load, and then renders an HTML5 video tag loading the video itself within the div holding that section of the index. However, I didn’t want this on mobile devices. First, if you’re on a 3G network loading a 20MB video will take ages and second, there isn’t an autoplauy option for iPhones. Since the video is on background, you couldn’t even press the play button even if you wanted to.

Finally, some CSS for the video to get the full width of the container and stay behind the content:

#startVid {
top:0;
left:0;
width: 100%;
position:absolute;
z-index:0;
}

That’s it, a dozen lines of code, and the effect is amazing. I have to thank our lead designer – Georgy Kalaydzhiev for his JS awesomeness and saving me from going for a much more complicaed solution. Sometimes, the simpliest approach is the best one 🙂

This Post Has 4 Comments

  1. I just wanted to say thanks for this. I bookmark so little that I barely know where the bookmarks bar is. And I bookmarked this. (I get spam like this, but this is for real). Short, simple, effective, and best of all, specifically for Genesis. I can’t wait to try it. So let me say it again, thank you for posting and sharing this.

    Linda

  2. OMG you rock! Thanks so much! I was doing this with like 100 lines of code..?(I think or more)
    Your just cool and efficient and well I don’t know what to say except I am glad I surfed this topic..
    🙂

Leave a Reply

Close Menu

×
×

Cart