Introduction

Embedding videos onto your website, rather than hosting them yourself, is the best approach to getting your content on your site.

If you’re interested in learning more about why then head over to our blog 7 reasons why you should never host your own videos.

We use Vimeo pro on our website, as we have found it to be flexible, affordable and easy to use.

To get the best from Vimeo there are a few settings that should be considered.

First off, if you don’t have an account, for doing video embedding I can recommend Vimeo over YouTube for a couple of reasons.

The main one is how it handles videos after they play.

• With YouTube, you usually get the ‘watch more’ or autoplay screen at the end when your video ends.
• With Vimeo, you can set your video to end cleanly, either with a custom image, video, call to action or by simply letting it end.

And secondly is the ability to hide your videos from the public and have a link that will only work on your domain when embedding.

OK, so let’s dive into the steps you need to follow, and how to embed vimeo videos on your website.

Creating a Vimeo account.

1. Go to www.vimeo.com.
2. Click “Join”.
3. Create a username and password and enter your email.
4. Confirm your email by following the instructions sent to your inbox.

And that’s it.

Vimeo video setup

Once you have uploaded your first video, you’ll want to set things up.

1. Click on your video, it opens a new tab with the video and a menu to the right. Click on Advanced and it will go to a page with a menu to the left.

We are going to work on the General, Embed and Interaction Tools options within the Vimeo video interface.

2. On the General tab, scroll down to Privacy, click on it and change the following:

Who can watch? 
> Hide from Vimeo.

Where can this be embedded? 
> change to Specific domains
> type youwebsite.com and click on the plus button.

Who can comment?
>No one.

People can download this video 
> disable.

People can add to collections 
> disable.

HINT:

If you have multiple video settings to update you can select ‘All Videos’ and update the privacy settings for all of them at once.

When you’re done, click Save at the bottom. This will have to be done for each video.

If you already have some videos hosted on Vimeo you can change bulk setting for them like this…

Go to All Videos or select a folder to see the videos from a specific folder.

Select multiple videos:

Click in Privacy to bulk change the options and click Save:

3. On the Embed, enable the options under Controls.

On Actions, only enable the Embed option.

When you’re done, click on save at the bottom:

4. Now, on the Interaction Tools, click on the pencil icon to select the End Screen options, set it to Empty, click on Add and then Save at the bottom again. Your screen will look like this when you’re finished.

Here are all the options that are available in the end screen settings, feel free to choose another if you feel it to be more appropriate.

5. Now, go back to the Embed tab, click on Create preset, give a name of your choice for these settings, and save it (this just needs to be done once).

Creating this preset will save you all the hassle of having to repeat a lot of the process.

For the next videos, you just have to take steps 1 and 2.

When you get to step 3 (the Embed tab), just select the Preset you created, scroll down and click on Save. All the settings from steps 3 and 4 will be applied to that video.

Embedding Vimeo Videos

The following steps are for if your website is a WordPress website.

Embedding Vimeo Videos on Posts or Pages

The first step is to get the URL for the video that you would like to share. Copy the URL from your address bar and navigate back to your WordPress site.

From the Page or Post, click on the section you want to add the video and insert a text control.

Depending on what theme you are using these may be named slightly differently. However, ALL solutions will use the built-in WordPress text controls, which will look something like this

Click on the ‘Add media’ button to bring up the next dialog box, where you select ‘Insert from URL’

This will open another dialog, where you will paste the video URL you copied from the above step.

Click save and the video will be embedded on your page or post

Embedding Vimeo Videos using the Gutenberg video block

Gutenberg is WordPress’ way of authoring content on a WordPress website and is becoming more and more feature-rich. It may be that you are using a WordPress theme to author pages, but when it comes to creating posts Gutenberg is well worth considering. This article is for example authored using Gutenberg.

First, you want to add a new content block. Do this by clicking on the white plus sign in the blue box found at the top left of your post.

From there you’ll want to select the video block

Finally, you’d have the option of how you want to place the video on your site.

The dialog offers a few choices.

While it is possible to directly upload the video to your library this is not recommended. For a recap on why hosting videos on your site is not the best course of action, you can refer to our article 7 reasons why you should never host your own videos.

The ‘media library’ option will open the media library and allow you to either upload a video via the library or choose a video that has been previously uploaded.

The option we are interested in that will allow us to embed a YouTube video is ‘insert from URL’

Embedding Videos using the Gutenberg custom HTML block

Embedding a Vimeo video using the video block is super easy. It may be that for some reason you need to embed your video using HTML, and that is also possible.

In the blocks dialog, scroll down to the widgets section, and select the custom HTML block.

This block looks a little like a text editor and is where you will copy in any HTML code you may want to use.

Prefer YouTube as you video hosting choice?

If you prefer hosting your videos on Vimeo the process for embedding videos is similar and just as simple.

For a full run-through about how to embed videos hosted on YouTube, you can head over to our blog how to embed YouTube videos.

Summary – how to embed Vimeo videos

I hope this quick guide has shown you how easy it is to embed a Vimeo video on your website.

Feel free to drop a comment in the box below, it would be great to hear from you.

If you’d like any assistance with your website then get in touch. We’d be more than happy to go through things and discuss your requirements at a time of your choosing in a free strategy session. Alternatively, if you’d like to find out more about our website services click on the button below.