How to Add a Vimeo Background Video to Your WordPress Site: A Step-by-Step Guide

Adding a background video to your WordPress site can enhance its visual appeal and engagement. Vimeo offers a great way to add a background video to your site without using any plugins. In this tutorial, we will show you how to add a Vimeo background video to your WordPress site in a few simple steps, including choosing a Vimeo video, preparing an image, creating a new page or editing an existing one, and adding the HTML, CSS, and JavaScript code to create the Vimeo background video section. By the end of this tutorial, you will have a visually stunning Vimeo background video on your WordPress site, optimized for both SEO and user engagement.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Choose a Vimeo video and copy its ID

Choose a Vimeo video that you want to use as your background and copy its ID. You can find the video ID by going to the Vimeo video page and looking for a sequence of numbers in the URL. For example, if the URL is https://vimeo.com/123456789, the video ID is 123456789.

Prepare an image for the background video

Prepare an image that will be displayed before the video is loaded, and save it in the WordPress media library. This image should be the same dimensions as the video and visually complementary to the video content. To upload an image to the WordPress media library, go to the “Media” section of the WordPress dashboard and click “Add New”. Then, select the image file from your computer and upload it.

Create or edit a WordPress page

Create a new page or edit an existing one in WordPress. To create a new page, go to the “Pages” section of the WordPress dashboard and click “Add New”. To edit an existing page, go to the “Pages” section and click on the page you want to edit.

Add the HTML code to create the background video section

Switch to the Text editor and add the HTML code to create the background video section. Copy and paste the following code into the Text editor:

<section class="background-video">
  <div id="player"></div>
</section>
Code language: HTML, XML (xml)

This code creates a new section with the class “background-video” and a <div> element with the ID “player”. The Vimeo player will be loaded into this <div> element.

Add CSS code

Add the CSS code to your WordPress theme’s style.css file or in the “Customize” section of your WordPress dashboard. Copy and paste the following code into the style.css file or the “Customize” section:

.background-video {
	background-image: url("path/to/image.jpg");
	background-size: cover;
	background-position: center center;
	height: 100vh;
	width: 100%;
}

.background-video.vimeo-loaded {
	background-image: none;
}

Code language: CSS (css)

Replace ‘path/to/image.jpg’ with the URL of the image you uploaded to the WordPress media library. This code sets the background image of the “background-video” section to the image you uploaded, and sets the height and width of the section to 100% of the viewport height and width. The second line of code sets the background image to none after the Vimeo player is loaded. Of course you need to change it to your likening to fit your website.

Add the JavaScript code to load the Vimeo Player API and create the Vimeo player

Add the JavaScript code to load the Vimeo Player API and create the Vimeo player. Copy and paste the following code at the bottom of the page:

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
  var options = {
    id: 'VIDEO_ID',
    autoplay: true,
    muted: true,
    loop: true
  };

  var player = new Vimeo.Player('player', options);

  player.on('play', function () {
    var section = document.querySelector('.background-video');
    if (section) {
      section.classList.add('vimeo-loaded');
    } else {
      console.error('Background video section not found.');
    }
  });

  player.on('error', function (error) {
    console.error('Vimeo Player error:', error);
  });
</script>
Code language: HTML, XML (xml)

This code first loads the Vimeo Player API by including the player.js script from Vimeo. Then, it creates a new player object with the new Vimeo.Player() constructor, passing in the ID of your Vimeo video, as well as the options object. The player object is then loaded into the <div> element with the ID “player”. The options object specifies settings such as whether to autoplay the video, whether to loop it, and whether to show the video in the background.

Make sure to replace VIDEO_ID in the options object with the Vimeo video ID you copied earlier. Once you have added this code, save your page and preview it to see the Vimeo background video in action.

Save and preview the page

Save the page and preview it to see the Vimeo background video in action. You should see the image you uploaded first, and then the Vimeo player should load and play the video.

That’s it! Adding a Vimeo background video to your WordPress site can make it more engaging and visually appealing. With these simple steps, you can add a Vimeo background video to your WordPress site without using any plugins. Remember to choose an image that complements your video and optimize the video for fast loading times.