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

Time needed: 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 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>

  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.

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.

0 0 vote
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
Do NOT follow this link or you will be banned from the site!
0
I would love your thoughts, please comment. VJx
()
x
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