YouTube Background Video Block for Gutenberg
A quick experiment with combining the YouTube embed API with a dynamic Gutenberg block to create a new type of hero element.
What is this?
I'm a front-end engineer and WordPress developer at 10up. To learn more about Gutenberg, I built this dynamic block for fun and ended up using it on my own personal website. You can see it in action there.
The architecture for this plugin is loosely based on 10up’s plugin scaffold. If you're interested in plugin development for WordPress, check out 10up's open source projects and Engineering Best Practices for more info.
What does it do?
Unlike Vimeo, which has built-in support for Chromeless background videos, YouTube no longer supports completely hiding video controls, UI, related content suggestions, or branding in videos embedded via its API. Unfortunately, Vimeo's chromeless features require a paid membership. Some quick research led me to find some examples of using CSS to effectively hide the YouTube UI. I owe these examples a debt for showing me it was possible.
How do I use it?
First off, this is a sandbox experiment, not intended as a production-ready or open source tool. I may end up developing it as an open source plugin, but for now, I offer no support or guarantees for this code. But if you'd like to play around with it, here's how:
- Clone this repo to your
npm run startto install dependencies and compile assets.
- In your WordPress Plugins dashboard, activate the Derrick's Test Block plugin.
- In any post or page content, find the Background Video block inside the Dkoo block category.
You can use any video that's publicly streamable on YouTube. There are currently no options for playlists or other player configuration settings. Have fun!
If you use this for any project, personal or otherwise, please let me know!