A while ago, I published an article about the various customizations I made to the SpicePress theme after a theme update wiped out many of my changes. In that article, I documented the CSS and PHP modifications required to adapt the theme to my needs.
If you haven’t read it yet, I recommend starting there, as this post builds on those modifications:
Customizing the SpicePress Theme for My Blog
Since then, I have implemented another enhancement that significantly improves the visual appearance of the homepage: replacing the static hero image with a full-screen background video.
Why Replace the Hero Image?
The original SpicePress homepage slider uses a simple background image. While this works well, a short looping video can make the page feel much more modern and engaging without changing the overall layout.
The goal was to:
- Keep the existing overlay and text content.
- Preserve the call-to-action button.
- Maintain mobile compatibility.
- Continue using the existing SpicePress slider structure.
- Minimize changes to the overall theme architecture.
Finding the Correct File
Initially, I assumed the slider was part of the theme itself. After some investigation, I discovered that the homepage slider is actually generated by the SpiceBox plugin.
The relevant file was:
wp-content/plugins/spicebox/inc/spicepress/sections/spicepress-slider-section.php
This file contains the function responsible for rendering the homepage hero section.
Original Implementation
The default SpicePress implementation uses a background image:
<div class="item" style="background-image:url(<?php echo esc_url($home_slider_image); ?>); width: 100%; height: 90vh; background-position: center center; background-size: cover; z-index: 0;">
This works perfectly for static images but does not allow video backgrounds.
Modified Implementation
I replaced the background image approach with an HTML5 video element:
<div class="item video-hero" style="width:100%; height:90vh; position:relative; overflow:hidden; z-index:0;">
<video autoplay muted loop playsinline class="hero-bg-video">
<source src="/wp-content/uploads/header-video.mp4" type="video/mp4">
</video>
The remaining slider structure, including overlays, text content and buttons, remained unchanged.
Additional CSS
To ensure the video behaves like a responsive hero image, I added the following CSS:
.video-hero {
position: relative;
overflow: hidden;
}
.hero-bg-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
z-index: 0;
}
.video-hero .overlay {
z-index: 1;
}
.video-hero .container {
position: relative;
z-index: 2;
}
The object-fit: cover property ensures that the video fills the complete hero area regardless of screen size while maintaining its aspect ratio.
Browser Compatibility
Modern browsers generally require autoplay videos to be muted. Therefore the following attributes are important:
<video autoplay muted loop playsinline>
- autoplay starts playback automatically
- muted allows autoplay in modern browsers
- loop continuously repeats the video
- playsinline prevents fullscreen playback on mobile devices
Things to Keep in Mind
One important lesson learned during this customization is that the homepage slider is not part of the SpicePress theme itself but part of the SpiceBox plugin.
This means that future updates to either the theme or the plugin could overwrite custom modifications. For long-term maintainability, it would be advisable to implement such changes through hooks, filters, or a child-theme compatible solution whenever possible.
Final Thoughts
The result is a much more dynamic homepage while retaining the familiar SpicePress layout and functionality. The modification required only a small change to the slider template and a few lines of CSS, but it noticeably modernized the overall appearance of the blog.
Combined with the customizations described in my previous SpicePress article, the theme now fits my personal requirements far better than the default installation.
Leave a Reply