Video Backgrounds for WordPress Page or Post using GeneratePress

A video background is an appealing design aesthetic and a great way to showcase your services, facilities or skills. Adding a background video to our Page or Post Hero is super easy using GeneratePress Elements. We just need to upload the video to media library and add some HTML and CSS into the content area.

I am happy to set up a similar video backgrounds for you, please contact me for a quote.

How to add Video Backgrounds using GeneratePress Elements

video backgrounds - Video Backgrounds for WordPress Page or Post using GeneratePress

Adding a background video to our page Hero is super easy using GeneratePress Elements. We just need to upload the video to media library or get its source URL and add some HTML and CSS into the content area.

Total Time: 10 minutes

  1. Upload your video (.mp4) to Media Library

    Select Media > Add New to upload your video (in .mp4) format
    You will need to click on Copy URL later for our video link.

    video-background-add-media

  2. Add Video Background Code – Create an element

    Select Elements (1). Then click on Add New Element button.
    Provide a Title and paste the required code (2)
    We will set up the site header shortly using these tabs (3)

    video-background-add-element

  3. Add the required code

    Copy-Paste the code below.
    Use the link you copied in Step 1 in place of VIDEO_LINK_HERE in code below.
    I have set to heading (h1) to automatically use the page/post title for the content.

    <video loop muted autoplay poster="" class="background-video">
    <source src="VIDEO_LINK_HERE" type="video/mp4">
    </video>

    <div class="background-video-content">
    <h1>{{post_title}}</h1>
    </div>

    <style>.background-video{position:absolute;top:0;right:0;bottom:0;left:0}.page-hero{position:relative;overflow:hidden}.background-video-content{position:relative;z-index:1;padding:2em 4em;background-color:rgba(0,0,0,.5)}.background-video-content h1{color:#fff;font-size:3em}.background-video-content p{color:#fff;font-size:1.75em}video[poster]{object-fit:cover;width:100%;height:100%}</style>

    Illustrating the different purposes of the code: to create the html5 video player, create a background overlay and code to style the header

  4. Settings for the Page Hero Tab

    Apply the settings as illustrated below.

    video-background-page-hero

  5. Settings for the Site Header Tab

    Apply the settings as illustrated below if you want to merge the header and navigation with this video background. You can opt to merge, not to merge or merge only on desktop.

    video-background-site-header

  6. Settings for the Display Rules Tab

    Apply the settings as illustrated below. Here I have set this to display for this particular post; you can opt to show it for all pages, some pages etc using the Location and Exclude rules.

    video-background-display-rules

  7. Voila!

    Enjoy a nice video background for your page header.

    video backgrounds - Video Backgrounds for WordPress Page or Post using GeneratePress

Frequently Asked Questions (FAQs)

What theme do I need to design Video Backgrounds?

You will need access to GeneratePress Premium theme. It is my go to theme for all of my own and client WordPress projects.

What plugins do I need to design Video Backgrounds?

No plugins are needed. You only need GeneratePress theme.

Read More

I am happy to set up a similar video backgrounds for you, please contact me for a quote.

VJ - Vijay Rudraraju

Vijay Rudraraju (VJ)

I am web design and SEO consultant with over 12 years experience. I am obsessed with SEO, web design, WordPress, productivity hacks and page speed optimisation. I publish articles and tips to help you improve your online presence.

2 thoughts on “Video Backgrounds for WordPress Page or Post using GeneratePress”

Leave a comment

 

Get in touch


VJ Design - Web Design Melbourne
Affordable and creative web solutions from Melbourne, AU. I build robust fast-loading WordPress sites for a fraction of the price. Call VJ on +61389867186
Address :
106 Alamanda Blvd,
Point Cook,
VIC - 3030
Australia.
Tel : +61389867186
Email : hello@vjdesign.com.au

 Logo

Image of

$600-12000