The request kept arriving in the same shape. A client would see a site with a looping video behind the headline and want the same thing. Each time, the answer was to open that project’s theme, add the markup, add the overlay CSS, wire up the lazy loading, and remember to suppress the video on mobile. Then do it again on the next site, slightly differently, because no two themes had the same hero markup.
That is a maintenance debt disguised as a feature. Fix a bug in the loading behaviour and you have to remember every theme you put it in.
The decision
Anything I want on more than one site should be a plugin, not a theme edit. So NB Hero Video is built to be installed anywhere, on any theme I did or did not write, and to leave the theme completely untouched.
Targeting by selector, not by template
The core design choice is that the plugin does not need to know anything about the theme. A settings page holds repeatable rows, and each row is three things: a CSS selector for the section you want, the video, and the overlay treatment. The plugin finds that section on the front end and puts the video behind it.
That means it works on a hero, a mid-page call to action, a footer band, or a section of a theme bought off the shelf. Nothing is hard-coded to one layout, so the same plugin runs across every site I maintain and gets fixed in one place.
The part that saves the most time
Writing a correct CSS selector for someone else’s theme means opening dev tools and guessing at class names. So the plugin has an admin picker: load any page with the picker active, click the section you want, and it captures the selector for you.
It is a small feature and it removed the only genuinely annoying step in the whole setup.
Three ways in
- Settings rows, for the common case where you want a background on an existing section and do not want to edit anything.
- A shortcode, for dropping a video block into page content directly.
- A PHP function, for calling it from inside a template when I am building the theme myself and want it in a specific place.
Overlay control, including none
Video behind text needs an overlay or the text becomes unreadable. But not every use is text over video, so the overlay levels include none, and the fill can be a gradient or a flat wash depending on whether the section needs a soft fade or an even tint.
There is also an optional play and pause button, off by default, because a control that appears on a decorative background is clutter. Turned on and paired with no overlay, the same component stops being a background and becomes a silent video player, which was not the original brief but is the more useful half of what got built.
Outcome
One codebase instead of a dozen copies. New sites get video backgrounds without any theme work, existing sites get improvements by updating a plugin, and bought themes can have the feature without being forked.
