{"id":4405,"date":"2021-09-09T18:45:53","date_gmt":"2021-09-09T17:45:53","guid":{"rendered":"https:\/\/wp-tutorials.tech\/?p=4405"},"modified":"2022-11-13T18:04:28","modified_gmt":"2022-11-13T18:04:28","slug":"full-width-hero-video-without-a-plugin","status":"publish","type":"post","link":"https:\/\/wp-tutorials.tech\/add-functionality\/full-width-hero-video-without-a-plugin\/","title":{"rendered":"Full Width Hero Video Without a Plugin"},"content":{"rendered":"\n
\n
\n

Adding a full width hero video banner to a website is a great way of grabbing a user’s attention. It’s a common misconception that you need an expensive slider plugin or specialist software to make it work. But you can add a video hero banner with just a few lines of PHP code in your theme’s functions.php file, and a bit of CSS to lay it out.<\/p>\n\n\n\n

In this tutorial, we’ll break down the problem and figure out how to solve it without having to add yet another plugin to our site.<\/p>\n\n\n\n

Before you start, make sure you’re using a custom child theme<\/a> so you can edit your functions.php file. You’ll also need to install the Advanced Custom Fields<\/a> (ACF) plugin, which is pretty-much a requirement for any WordPress project.<\/p>\n<\/div>\n\n\n\n

\n
\"Big<\/a>
Big Buck Bunny Film<\/figcaption><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n

Create Some Custom Fields<\/h2>\n\n\n\n

We’re going to use ACF to add three custom fields to our posts\/pages. In ACF’s “Custom Fields” area of your website, add a new Field Group called something like “Hero Fields” (you can call it anything you like). Then add three new fields with the following properties. Make sure the field names are correct, because we’re going to reference those from the PHP code.<\/p>\n\n\n\n

Label<\/th>Name<\/th>Type<\/th><\/tr><\/thead>
Hero Video<\/td>hero_video_url<\/td>Url<\/td><\/tr>
Call to Action Label<\/td>call_to_action_label<\/td>Text<\/td><\/tr>
Call to Action URL<\/td>call_to_action_url<\/td>Text<\/td><\/tr><\/tbody><\/table>
ACF Fields for our video hero banner<\/figcaption><\/figure>\n\n\n\n

You’ll want to set the locations too… which types of content you want to be able to have hero banners. If you want it on the front page of your site, you’ll probably want to include “Post Type is equal to Page” in the locations.<\/p>\n\n\n

\n
\"Hero<\/a>
Hero Video ACF Field Locations<\/figcaption><\/figure>\n<\/div>\n\n\n

Save the field group and check that it’s working… Edit any page\/post and you’ll see a meta box where you can set the Hero Video URL, and the two Call-to-Action fields.<\/p>\n\n\n\n

Analyse the Page Layout<\/h2>\n\n\n\n

Before writing any code, we need to figure out how & where we’re going to inject some HTML into the top of the page, and how we’re going to make this content “break out” of the centre column so it becomes full width.<\/p>\n\n\n\n

Inject the Banner HTML<\/h3>\n\n\n\n
\n
\n

The HTML to create a video banner is really simple (it’s a <div><\/code> with a <video><\/code> element inside it). But… we need to figure out where on the page we want to render it. You could hook the WordPress the_content filter<\/a> and prepend our HTML to the front of $content<\/code>. But that has the side-effect of injecting the hero banner inside your content’s <article><\/code> element. That might work for some cases, but we want to inject it before<\/strong> the <article><\/code> element.<\/p>\n\n\n\n

On this site, we’re using Astra<\/a>, which is easy to hook. The hook for Kadence<\/a> is probably very similar, and you can try different action hooks until you find one that works for your parent theme.<\/p>\n\n\n\n

The hook we’re using is astra_template_parts_content_top<\/strong>, and all we need to do is use add_action()<\/a> to tell WordPress that whenever astra_template_parts_content_top is triggered, call our function so we can inject our HTML.<\/p>\n\n\n\n

info<\/span>If you find a useful hook for your theme, let us know in the comments below \ud83d\udc47 \ud83d\udc47 \ud83d\udc47<\/p>\n<\/div>\n\n\n\n

\n\n\n
\n
\"Insert<\/a>
Inject HTML with an action hook<\/figcaption><\/figure>\n<\/div>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Break Out of the Centre Column<\/h3>\n\n\n\n
\n
\n

If you create a block element in HTML and set its width to 100%, it’ll be as wide as its parent element.<\/p>\n\n\n\n

If you’ve got some content on a site that sits in a centre column, and you want to add a block that “breaks out” of this centre column to go full width, you need to fiddle the margins and set the width<\/code> and max-width<\/code> properties to the browser’s view port width, like this…<\/p>\n\n\n\n

.hero-banner {\n    \/* Break out of the centre column *\/\n    margin-left: calc(-50vw + 50%);\n    margin-right: calc(-50vw + 50%);\n    max-width: 100vw;\n    width: 100vw;\n}<\/pre>\n\n\n\n
tip<\/span>This is a handy little block of CSS to keep in your toolkit. Add it to any class definition and it’ll make that block element become the full width of the browser’s view port.<\/p>\n<\/div>\n\n\n\n
\n\n\n
\n
\"Make<\/a>
“Break Out” of the centre column<\/figcaption><\/figure>\n<\/div>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
Add Some Video<\/h2>\n\n\n\n
We need to attach a video file to some content, using our new ACF fields. Easy stuff… Go to the page\/post you want to add the video to, and you’ll see the custom fields, like this:<\/p>\n\n\n
\n
\"Hero<\/a>
Full Width Hero Video : Big Buck Bunny<\/figcaption><\/figure>\n<\/div>\n\n\n
It’s definitely best to self-host the video, like we’re doing here. But you can host the video file elsewhere if you’re worried about tripping your site’s bandwidth allowance.<\/p>\n\n\n\n
Let’s Write Some Code<\/h2>\n\n\n\n
In your custom child theme, create a folder called wpt-hero-banner<\/strong>. Go into this new folder and create a file called wpt-hero-banner.css<\/strong>. Next, go back up to your child theme’s main folder and create a file called wpt-hero-banner.php<\/strong>. Your custom child theme’s files should now look something like this:<\/p>\n\n\n\n