Component to play Youtube video as background

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!

16 Likes

Whoa! This is awesome, @forresto!!

Thank you for sharing this! :webflow_heart:

1 Like

This. Is. Amazing!! Strong work!

1 Like

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?

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

1 Like

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 …

1 Like

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.

Hi, would you mind making this cloneable again?

1 Like

Hello to everyone. I think the best option for you is to open the site we are talking about and select your video. Play the clip then set it to full screen. btw, I want to find a service with which you can convert songs from YouTube for free and then listen to them in mp3 format. I found reviews about this https://getmp3.me/downloader service on the Internet, but I have not tried it myself. Does everything really work there for free? Share your feedback. Thanks to everyone.