[Tutorial] How to add a Custom HTML5 Background Video

[Waldo (Waldo Broodrÿk)]

Hey @Live_Tour_Network I moved your post to this Tips & Tricks section where there is a how-to on creating video backgrounds on your site.
Have fun!

Waldo

[mnmustafa]

poster=“http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg”

Big thanks for this! I wished videos worked on smartphone browsers.

[Marcus_Vinicius_Nobr (Marcus Vinicius Nobre)]

You found a solution to your problem ? I’m with the same…

[Winfredcruze (Winfred)]

thanks for sharing this useful tutorial, I had tried to add background video, but it didn’t show up, after following the guide, it finally works.

[Adam_Wright]

hi great tutorial so far I’m trying to use a youtube and nothing seem to be working any pointers thanks

` video autoplay loop style="width:100%; height: auto; position:absolute; "
source src=“http://www.youtube.com/embed/i5GU6_Bpxdc”/>
source src=“http://www.youtube.com/embed/i5GU6_Bpxdc”/>

/video>`

[TravisBKlein]

I use a totally different, much smaller script then what is used here. So can give you a play by play for mine but not that one.For me:I basically put this in the “before end of body” add code section in your website settings page:

<script>

$(function () {

var outerDiv = $(’.videocontainer’);
var videoTag = outerDiv.find(‘video’);

$(window).resize(resize);
resize();

function resize() {
var width = outerDiv.width();
var height = outerDiv.height();
var aspectW = 16;
var aspectH = 9;
var scaleX = width / aspectW;
var scaleY = height / aspectH;
var scale = Math.max(scaleX, scaleY);
var w = Math.ceil(aspectW * scale);
var h = Math.ceil(aspectH * scale);
var x = 0;
var y = 0;
if (w > width) x = -(w - width) * 0.5;
if (h > height) y = -(h - height) * 0.5;

videoTag.css({
  width: w,
  height: h,
  top: y,
  left: x
});

}

});
</script>

Then I open the designer, drag in an embed and paste this:

<!-- Begin Video Embed -->

<video autoplay style=“width:100%; height:100%; position:absolute; margin:auto; z-index: 0; top: 0;”>
<source src=“http://yourvideolink.com/video.mp4” type=“video/mp4”>

<source src=“http://yourvideolink.com/video.webm” type=“video/webm”>

</video>
<!-- End Video Embed -->

Replace the “http://yourvideolink.com/video” links with your content.Remember to set the class on the video embed element in the designer as “videocontainer”. If you want it to fill the page height, set it’s (the video embed) height to 100%, position relative or absolute - and also set the body position to relative.

PS: Video will not work on tablets or phones.

I used this but my video just covers about half of my page and its missing the top half.

http://travisbklein.webflow.io/

https://preview.webflow.com/preview/travisbklein?preview=c9a223b9ad616b860ba1acc25a62ff34

I made sure the parent div has relative position also.

any idea why?

Also why doesn’t it loop? thanks so much!

[PixelGeek (Nelson)]

@TravisBKlein soon this WHOLE thread will be obsolete. We’ll be releasing a Background Video component that will allow you to add a background video in 3 clicks!

Join me on next week’s Webflow workshop to see it

[TravisBKlein]

@PixelGeek omg ty, I can’t wait, I have been at this all day

[bjesus]

Hi, would you mind sharing an ETA for this feature? I was planning to try and implement this in a client’s website today, but I can wait a few days if it would mean doing it in a less hackish way. Is this a matter of days? weeks? months?

Anyhow, thanks in advance for being such a close listen to your community

[callmevlad (Vlad Magdalin)]

@TravisBKlein @bjesus @Adam_Wright @LaurentCardinal @Marcus_Vinicius_Nobr Just a heads up, we just added a native Webflow Background Video component that makes setting this up much easier than before: https://webflow.com/blog/new-feature-the-background-video-component