Fullscreen-background-video

Design help General
1

Hi ,

I’m currently trying to put a fullscreen background video on my website : https://webflow.com/design/demo121?preview=6713d74fc4f86985fd2bf5d40c44a969

I’ve tried Method #1 and Method #2 of this page : [Tutorial] How to add a Custom HTML5 Background Video - Webflow Tips - Forum | Webflow
without any success. (Method 1 error in code line 110 and 119 and method 2 just not working)

I’ll be working really hard this week to get this feature working!

Thanks for your help!
Jon

2

It works for me (I see the video running in the bg in the designer and on preview.
Although your video is big, 7.6mo, full HD, so it stops playing several times before being loaded entirely.

You have to set a poster image for when the video’s not loaded yet. It has to be declared in the video tag:

<video autoplay loop poster="polina.jpg" id="bgvid">

Then the video can be optimized (more compressed and reduced in size), and you also need two other formats for mobile and other browsers (ogg, webm).

4

This usually works for me:

5

Oh! Thx for the tips!

Sorry my question was not clear!
It opens fullscreen but when you resize the browser (minimize, etc) you can see it shrinks!

6

Hi @Jon104, this demo will cover 2 out of the 3 things you need:
(1) Background video using the Webflow Embed widget
(2) Fills the height of its parent
(3) Doesn’t center the video (will need custom code for that)

Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Fullscreen Background Video

Hope this helps - all feedback is welcomed (and encouraged!)

7

This is working really great!!

Thank you!

8

It fills the width also!

style="min-width:100%;min-height:100%;"

OK, perfect for me, since yesterday I’m battling with a videos that I can’t seem to force both ways. I thought I had tried everything, how could I miss this (:

Thanks!

9

@vincent Find a way to center the video with jquery :stuck_out_tongue: !