Clicky

1-866-921-7335

20 February 2019

Embedding video on your WordPress website

How To Embed Video On Your WordPress Website

Adding various types of content to your posts and pages can engage your readers, break up any paragraph-heavy layouts and can add color to your presentation. Images, videos, photo galleries and blockquotes are a few examples of content types that can enliven your web pages. In fact Jeff Bullas claims that articles with images get 94% more total views than those without.

Today’s post will focus on using video on your website. We will go over the various ways to add video to your WordPress posts and pages, including:

  • Embedding YouTube and Vimeo Videos using the new Block Editor (WordPress 5.0, aka Gutenberg)
  • Embedding videos using the Classic (non-Block) Editor
  • Embedding self-hosted videos

WordPress makes the process easy and gives you several ways to insert video into your content, whether you are operating in the new WordPress 5.0 Block Editor environment or using the Classic Editor. No previous experience is necessary and, unless you require a hefty amount of customization in presenting your video, no plugins are needed.

If you’re skeptical that the results are worth the effort Keep in mind Forbes and Small Biz Trends estimate that in 2019, 80% of internet traffic will be for video.

If you need further convincing that it’s worth putting video in your posts, note these stats from our AmDee article “Is It Time Your Nonprofit or Business Considered Using Video?”:

  • Videos are six times more likely to be shared than photos (Social Media Today)
  • 59% of executives say they would rather watch a video than read text. (Wordstream)
  • Viewers retain 95% of a message when they watch it in a video, compared to 10% when reading it in text. (Wirebuzz)

If you or your organization have original video(s) you wish to embed, the most SEO friendly way to do this is to host them on youtube or vimeo. If you don’t already have an account, first you must create a YouTube or Vimeo account and then you can upload your video. Both sites offer easy step-by-step instruction on how to do this.
If you are embedding a public video already hosted on one of those video platforms, simply navigate to that video’s page to begin. You do not have to be logged into YouTube or Vimeo to embed a video, nor do you have to have an account to embed a video.

Embedding YouTube Videos in WordPress 5.0

To embed a YouTube video into your WordPress content, log onto your website and open the page or post that you’ll be working with. Open another web browser tab and go to the YouTube video which you wish to embed.

In your page or post’s content, scroll down to where you will be inserting the video and click on the encircled “plus” sign (+) to add a new content block. Find the Embed Blocks section, pictured below, and select the YouTube icon from the list.

The Embed Blocks section in the WordPress 5.0 Block Editor

The YouTube embed block will then be inserted into your content area as shown here:

Open your other browser tab where your YouTube video is, and copy the url to your clipboard. Return to your WordPress editor and paste the YouTube url into the appropriate area. Click the Embed button to the right, update your post and voila! You now have a YouTube video embedded on your website.

Note: If you are embedding a long video and want your readers to be able to skip right to the important part of the video that you wish to highlight, YouTube allows you to pick a starting point. Instead of just copying the video’s url, go to the bottom right of the video and click on “Share.”

You will be presented with a pop-up window where you can check the box at the bottom that reads “Start at.” When you check the box it turns blue. From there, you set the video’s starting point and then copy the new url shown above the checkbox and paste that into your post’s embed block.

Embedding Vimeo Videos in WordPress 5.0

Embedding videos from Vimeo works much the same way as youtube. In terms of how a Vimeo video behaves on your site, one key difference is that your readers will not be subjected to any ads before, during or after the video. (YouTube allows qualifying content creators to add commercials at chosen points.)

To add a Vimeo video to your WordPress content, add a new block and choose the Embedded section as before. You’ll see the blue “V” Vimeo icon on the left and a few rows down from the YouTube icon.

The Embed Blocks section in the WordPress 5.0 Block Editor

Select the Vimeo embed block and it will be inserted into your content area. As with the YouTube embed block, simply paste in the url from your video, click the Embed button and update your post. Done!

Should you wish for some minor customization, Vimeo’s “Share” pop-up window also has some extra options for your video, as seen in the graphic below:

Embedding Self-hosted Videos in WordPress 5.0

Self-hosted videos can take up alot of bandwidth and slow your site down hurting your SEO efforts. That is why most organizations choose to have their original video content hosted on YouTube and Vimeo, and then simply embed the links on their websites and stream them that way.

However, there are certainly cases in which a business or nonprofit may decide that it doesn’t want some of its video content on a major video platform and would rather have it only on their own website. These could be proprietary videos, limited promotional materials or fundraising and introductory videos.

Optimally, these should also be short videos in the range of 30 seconds up to a minute or two. Anything longer than that might be a bit resource intensive for your site’s bandwidth, especially if the videos are in HD.

Note: For larger videos which you’d like to host elsewhere but not necessarily want the whole world to see, you can look into the viewing and sharing options available on many of the social network platforms. For example, YouTube allows video authors the ability to have their video not show up in YouTube search results and viewable only to those who have the url or embed code.

For those videos which you decide you do want to self-host on your site, check the file size before attempting to upload your video to your site. Then navigate to your site’s Media Library and click “Add New.” You will be presented with the upload screen and it will alert you to the maximum file size you can upload to your Media Library with your current settings.

This number will vary from site to site, depending on your web hosting plan and theme files. If your video selection is larger than this number, ask your web developer to assist you in increasing the upload limit. There are several good tutorials on the process, including articles at wpbeginner and Kinsta.

Alternatively, you could use a plugin to achieve a larger file size limit for your Media Library. As of this writing, two of the more popular plugins for such purposes, Tuxedo Big File Uploads and Increase Max Upload Filesize, have updated their compatibility to WordPress v4.9.9 and 4.8.8 respectively but have not fully integrated with WordPress 5.0.

Once you have increased your Media Library’s file size limit, upload your videos to your site.

Scroll down your page or post to where you want to embed your self-hosted video. Select “Add block” and choose the Video Block from the Common Blocks section.


Choose the Video icon from the Common Blocks section

The Video block will be added to your content area and give you several options to choose from. You will be able to drag a video file into the block, click the Upload button to load the file directly from your computer or click on the Media Library button to select a video that you’ve already uploaded. You can also use the “Insert from URL” button to paste in the video’s url directly. This button will also accept any working video url such as YouTube or Vimeo, so you are not limited to just what videos are stored on your site.

After choosing your method of uploading and linking your self-hosted video, click on the Update button to update and save your post and your video should be working.

Embedding Videos Using WordPress’ Classic Editor (pre-v5.0)

With the advent of WordPress’ 5.0, you can use the many block types and embed types to present different content elements in your posts and pages. However, there are numerous sites which have either opted not to update to 5.0 by choice or who have, out of compatibility and/or accessibility concerns, chosen to update to 5.0 but are bypassing it using the Classic Editor plugin. For those using older versions (pre-5.0) of WordPress or who are using the Classic Editor, the process for embedding a video is just as simple as for those using the Block Editor.

Open the post or page which you want to embed your video into. Navigate down to the exact area where you want the video to be. If you are embedding a YouTube or Vimeo video, paste your video’s url onto its own line and it will automatically render into your chosen video. Hit Update for a live post, or Save if you’re still working on the article and you’re good to go.

If you’re trying to embed a self-hosted video using the pre-5.0 editor, choose the “Add Media” button from your (Classic) WordPress editor.


Above: In the pre-5.0 WordPress editor, the “Add Media” button is atop the kitchen sink of options. In 5.0 websites using the Classic Editor plugin, the Add Media button is now an icon, circled below in blue:

Once you click on the Add Media icon, you will be taken to your Media Library. There, you can click on the video file you want to use, and then click on the blue “Insert into post” button on the bottom right of your Media Library’s screen. This will return you to the page or post you were editing and you can hit the Update button to save your changes.

Wrap-Up

Embedding video into your posts and pages makes for a more varied experience content-wise for your site’s visitors. Learning how to embed videos from different sources or using different WordPress editors or methods allows you and your staff to gain confidence as web publishers and expands your WordPress skillset.

For other AmDee articles on video and the WordPress editor, see:

Jeff C.

Headshot of Jeff Creamer

Jeff Creamer is a DC-based WordPress website administrator, tutor and consultant. He has been helping small businesses and nonprofits launch and manage their WordPress sites since 2013.