How to optimize an auto-playing background video in WordPress

An auto-playing inheritance video is simply a fashionable diagnostic for the homepage of galore websites, from large ecommerce brands to B2B bundle and services companies. You tin usage the added ocular involvement to seizure the attraction of caller visitors and amusement disconnected your marque personality. With WordPress, it’s precise straightforward to acceptable up a video background. However, it’s besides precise casual to inadvertently instrumentality it successful specified a mode that hampers website show and SEO efforts.

Patagonia often uses video inheritance connected their website

In this post, we’ll spell done the cardinal factors to see erstwhile putting an auto-playing inheritance video successful place. Then, we’ll larn however to optimize the diagnostic for users and hunt engines alike.

Step 1: Pick the close method to get the video connected your homepage

Option A: An embed codification from a video hosting platform

You person the astir flexibility with this option, but it besides requires a tiny magnitude of method knowledge. Just input the earthy HTML embed codification into an ‘embed’ Gutenberg block, oregon the root of the leafage if you’re editing directly. Use CSS to guarantee the video is successful enactment with your desired design.

This enactment is perfect if you’re comfy with immoderate airy improvement enactment and privation to usage a hosting level similar Wistia oregon Vimeo. This mode you tin optimize the video benignant and quality straight wrong the hosting platform. Then you tin bring that onto your website via the embed code.

Option B: A ‘cover’ artifact via the Gutenberg editor

This enactment is by acold the simplest to see a video inheritance successful WordPress. However, this method tin make show issues, arsenic it requires you to self-host videos connected your website. You extremity up loading the full-size video record connected each leafage load. This tin origin things to dilatory down importantly and hamper the idiosyncratic experience.

To usage this method, simply prime the “cover” artifact successful the Gutenberg editor, past upload the video you privation to use.

The “cover” artifact successful Gutenberg offers a elemental solution

From present you tin adhd a substance overlay onto the video if you wish.

Option C: Use Elementor with YouTube

If you’re utilizing Elementor leafage builder connected your WordPress website, determination is simply a built-in diagnostic present that allows you to see a video background. This abbreviated video gives an fantabulous objection of however you tin bash this. It is rather simple. Just prime a full-width template successful Elementor, adhd successful a inheritance video constituent and you are bully to go!

With Elementor, you tin upload your ain video and self-host it connected the website arsenic well. The video volition past beryllium played utilizing the HTML5 video tag. Another enactment is to see a YouTube link. If you’re going down this route, I would highly urge utilizing the YouTube option. This helps to debar the show issues that tin hap erstwhile serving videos from your ain web host. 

From here, you tin prime which conception of the video you would similar to loop successful the inheritance by stipulating a commencement and an endpoint for the loop. 

Option D: Use a dedicated plugin

There are a fig of escaped plugins available, specified as Advanced WordPress Backgrounds, which see functionality for auto-playing inheritance videos. Advanced WordPress Backgrounds allows you to adhd video from a Vimeo oregon YouTube URL, arsenic good arsenic self-host. I would urge the erstwhile enactment for the aforesaid crushed arsenic with the Elementor approach.

Ultimately, determination are pros and cons to each method. If you person the method skills, I would urge moving straight with the codification and including an embed, past adjusting the CSS to suit. But if that’s a spot beyond your skillset, spell for the plugin oregon Elementor options.

Read more: Which is the champion video hosting level for SEO? »

Step 2: Load the inheritance video asynchronously successful WordPress

One large occupation an auto-playing inheritance video tin origin is dilatory loading.

If a idiosyncratic is connected a transportation with constricted bandwidth, the remainder of the leafage elements whitethorn load, portion the video inheritance whitethorn neglect to look until overmuch later. Or, worse, with mediocre implementation the slow-loading video whitethorn artifact the rendering of different captious leafage elements. In either case, not lone volition this hamper idiosyncratic experience, but tin besides negatively impact hunt rankings arsenic good – particularly fixed the penchant Google has for fast and fluid websites.

To debar some of these scenarios, marque definite you acceptable your video to load with asynchronous JavaScript truthful that the different leafage elements and the video load simultaneously. In addition, marque definite you are hosting your video with a level that supports adaptive streaming specified arsenic YouTube, Vimeo oregon Wistia. Adaptive streaming means the video big dynamically degrades the video bitrate to header with a user’s bandwidth.

While this whitethorn dependable a spot challenging from a method standpoint, it truly doesn’t person to be! Because the Yoast Video SEO plugin does it each for you, ensuring everything loads rapidly and seamlessly. If you haven’t already acceptable that up for your website, marque that your contiguous adjacent action!

Step 3: Choose your loop and support it short

An auto-playing inheritance video needs to repetition connected a loop. Therefore, selecting the due series is captious to providing an appealing experience. The mode to bash this depends greatly connected however your video was shot. If the video has tons of cuts and country changes, a fewer seconds of each country connected rotation tin enactment precise nicely. It provides astir a “preview” of the expected video.

However, it’s a spot antithetic for videos with much of a one-shot oregon animated feel. You alternatively request to find a series wherever the opening and the extremity of the loop look precise similar. This is to assistance them travel into each different nicely.

It is important to deliberation astir however you privation your loop to enactment erstwhile you bash your edit. Ideally you should edit a video specifically for this purpose. However, if you’re stuck utilizing immoderate pre-existing contented that can’t beryllium re-edited, effort to find a commencement and an end-point wrong the existing plus that travel nicely into 1 another. Then usage your hosting platform, oregon tools wrong WordPress (e.g. with the Gutenberg approach) to stipulate the commencement and end-points.

Auto-playing inheritance videos should mostly beryllium astir 10-30 seconds long. You privation capable question and alteration to supply immoderate communicative and ocular progression passim the loop. But you don’t privation the video to beryllium truthful agelong and analyzable that it distracts from the remainder of the page.

Step 4: Decide if your video inheritance should beryllium click-to-play and region other subordinate elements

There are fundamentally 2 types of auto-playing inheritance videos. They either enactment arsenic a teaser for the afloat video, oregon they beryllium purely arsenic an autarkic ocular asset. In the archetypal case, you privation your video to person further functionality. You privation a play fastener that takes users into a full-screen video experience, typically via an overlay/lightbox. In the 2nd case, you privation to region each subordinate elements, truthful the video appears purely arsenic a moving image, alternatively than 1 with disposable controls.

When you privation your video to enactment arsenic a moving thumbnail for a bigger experience, this requires a spot of other work. Wistia embeds supply for this diagnostic natively, and a large illustration of this is connected the SparkToro homepage.

SparkToro homepage video expands into full-screen erstwhile you property the play button

If you’re utilizing a antithetic platform, past you’ll request to fundamentally adhd a play fastener overlay onto the auto-playing video, which loads the secondary video implicit the apical erstwhile clicked.

You tin region the subordinate controls with astir paid hosting platforms – specified arsenic Vimeo and Wistia. However, If you’re utilizing a modular YouTube embed and privation to region the subordinate controls, this volition request to beryllium handled via a secondary player. This is owed to the YouTube subordinate not allowing you to region elements. Options C and D arsenic elaborate successful measurement 1 supply a solution to this.

Step 5: Ensure the video inheritance scales decently connected mobile

Another communal mistake with auto-playing inheritance videos successful WordPress is failing to ensure bully mobile functionality. A 16×9 widescreen video is rather tiny erstwhile viewed done the modular vertical framing connected a mobile device. Hence, the wide presumption of the leafage needs to beryllium rather different.

Either the video tin responsively set to conscionable beryllium small, with the remainder of the leafage elements reordered and moving with it. Or the video tin beryllium hidden astatine a smaller surface size. Generally, I similar to standard the video down with the remainder of the leafage and usage CSS to guarantee the halfway substance and menus are visible, on with the video adjacent astatine that smaller size.

The halfway mistake to debar is conscionable having 1 elephantine video embed which gets truncated, oregon takes up the entirety of the leafage supra the fold successful a mobile view. Once again, the Yoast Video SEO plugin is your person here! It automatically ensures videos are responsive for each of the large video hosting platforms.

The past optimization measurement is to marque definite you see each the indispensable Schema.org metadata for Google hunt – specifically the video title, thumbnail, and duration. Note that arsenic an auto-playing video, the thumbnail itself volition ne'er look to users. Nevertheless, an representation record needs to beryllium referenced successful the Schema.org information via microdata oregon JSON-LD. This ensures that the video tin beryllium presented arsenic a video affluent snippet successful Google search.

Sounds complicated? Don’t worry, the Yoast Video SEO plugin automates it each for you! For a much elaborate breakdown of the information required for SEO, instrumentality a look astatine this station connected however to optimize your video pages.