Streaming live at 10am (PST)

Component to play Youtube video as background


#1

Note!

This experiment has a downside, and probably shouldn’t be used on live sites. Stick with Webflow’s built-in background video component.

For posterity:

This side project is an experiment to play with the kinds of rich components that we can share now. I did as much as possible with the Designer interface, and added the script needed to load, loop, and size the video. It should all get copied together when you copy the yt-bg element.
Any feedback on the functionality / code is welcome.
I’m looking forward to seeing more rich / interactive components shared here!


#2

Whoa! This is awesome, @forresto!!

Thank you for sharing this! :webflow_heart:


#3

This. Is. Amazing!! Strong work!


#4

This is great! Im using this on one of my projects and was just wondering if you could disable the video loop so it plays only once? Can i do so by changing the script?


#5

Sure, look for loop: 1, in the code block, and change it to loop: 0, … that should do it. :+1:


#6

This seems to have a very very serious problem — it seems to re-request the video for infinity; potentially chewing through a huge amount of data if left idle. We had a video of less than a mb but when left idle for a few minutes it chewed through 300mb in no time.

Is there any way to make this cache or only make a single request to the video?

It will be ruining some people’s data caps and costing them a lot of money. I would say it is very unethical to use in its current state, please avoid unless fixed! For example here in Australia its common for people to be capped to 500mb for a month …


#7

Yikes, I didn’t measure this, since it is a bit of a hack. It is not possible to change how youtube’s player loads the video data.

It’s better to use Webflow’s built-in background video for this reason. It uses a simple <video> tag, which browsers can cache.