Skip to content
A custom Gutenberg block for easily embedding YouTube videos as hero background elements.
JavaScript PHP CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
blocks
includes
.babelrc
.gitignore
README.md
package-lock.json
package.json
plugin.php
webpack.config.js

README.md

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?

You insert the Background Video block into your page or post content. You give it a shareable YouTube video URL. The block uses the YouTube JavaScript API to embed the video as full-viewport hero element with the video playing silently in the background, similar to this type of effect which has been trendy for all kinds of sites for the past few years. Optionally, you can add a "next" button which smooth scrolls to the next sibling element on the page, and/or overlay other blocks on top of the element (but be careful not to overflow the viewport or things might get wonky).

Why YouTube?

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 /wp-content/themes folder.
  • Run npm run start to 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!

You can’t perform that action at this time.