Webflow component for Youtube background video

Feedback Preview Clone

We can be heroes

just for one day

NOTE:

As noted in the forum, the browser can't cache a looping youtube video, so this hack isn't recommended for live sites.

Setup

Clone this project
Copy the yt-bg element above
To change the video, the yt-bg element has a custom attribute in the Element Settings ⚙️ panel: data-youtube-id‍
Change the background image of yt-bg__poster to match the video

Features

The video will size to "cover" the yt-bg on load, and whenever the browser window is resized
The main yt-bg can be sized and styled as you like
The hero yt-bg__hero can be removed or styled as you like
With no javascript, no video will load
The poster should fade in/out, hiding the player when it isn't playing
For videos that are not 16:9 ratio, change RATIO in the script
Caveats:
* Some mobile browsers (iOS) will not load/autoplay a background video.
* YouTube branding will be visible on hover sometimes.
* If you change the class name yt-bg__poster or the id of yt-bg__player you also have to change the script.

Credit

The yt-bg component is a side project by @forresto... discussion in the forum.

Demo video by NO COPYRIGHT MOTION GRAPHICS

Shoutout to Micah Ryan's Class naming 101: BEM