▼
Streaming live at 10am (PST)

Background video 100% height without loop

Community resources Webflow Tips
#1

Hello World,

I am very new to webdeisgn and it’s my first time in webflow. I apologize for that noobie question but I just struggle too much.

Here’s the problem. Even by watching tutorials I just can’t find how to set a background video full screen (on computer) It’s ok if it won’t work perfectly in mobile, and as far as I know, users need to click on it to launch the video.

So I need to put a background video, that launch when user connect to my main page and I want it to play only one time . In ideal, after the video finished, users would be redirect on my “real” main page, or the video would be just gone so users could see the menu, a background images etc etc… I don’t know if I explain it clearly…

Im pretty sure it is possible to do it but whatever I try I fail.

Have u any solutions?

Thanks Webflow community!!

#2

Hi @ITryMyBest ,
can you share a read only link of your projects progress so far.?

Maxi

#3

ok but im in shame…

https://kitten-coin.webflow.io/

#4

Hi @ITryMyBest,
here is my solution to your problem.
https://preview.webflow.com/preview/webflowtutorial12?utm_medium=preview_link&utm_source=designer&utm_content=webflowtutorial12&preview=512117e6f23396859e6da6caa6a4f5ee&pageId=60238e043001104c80816427&mode=preview
You can clone the whole site here:

Live Site: Video Test2

Maxi

1 Like
#5

Hello Mxi,

Thanks for your help and your solution! Do you have an idea on how to delete the "video has ended " pop up in the end?

On my part I find another solution without pop up but I can’t then display anything then. Do you have an idea?

https://kitten-coin.webflow.io/

thanks :slight_smile:

#6

Of course. I added custom code, which executes on video end. The popup is only a example.
You need to replace the alert(“video has ended”) with your redirect javascript code. If you don’t need a redirect, you can play the video as a overlay and hide the overlay on video playback end. Simply via JQuery.

Maxi

1 Like