Web Development: How to Embed a Youtube Video in WordPress

Wednesday, April 22, 2020

How to Embed a Youtube Video in WordPress

Video is a colossal part of the internet these days, with Youtube alone accounting for over a third of global internet traffic. If your content doesn’t include video of some kind, you’re missing an opportunity!

In this tutorial you’ll learn how to embed videos into your WordPress website, using Youtube firstly, and then using self-hosted video files.

How to Embed Video in WordPress

How to Embed Youtube Video in WordPress

We’ll begin with a basic WordPress setup, and let’s say we want to add a video to a post. In the admin we go to Posts > All Posts then choose a post to edit.

Add a Gutenberg Video Block

If you’re using Gutenberg (now the default editor for WordPress) go to the Add Block button in the top left of the editor, click it, then search for the Youtube block (alternatively you’ll find it in the embeds category of blocks):

Then, in the block which is added to the page, enter the URL of the Youtube video you want to embed:

Click Embed, and that’s it! Your Youtube video has been added to your WordPress post or page. The Gutenberg block takes care of all the markup code to embed the video for you.

Embed Youtube Videos Using the WordPress Classic Editor

For older versions of WordPress, or if you’re using the Classic Editor plugin, you’ll need to approach things differently.

Begin by going to the Youtube video you want to embed, then hit the Share button and choose the embed code snippet:

Copy the whole code snippet as shown above, ready to paste into WordPress.

Back in the WordPress post or page editor, make sure you’re in the Text view of the editor, then past the snippet wherever you like.

Easier Still: Automatic Embedding by WordPress

Irrespective of what version of the WordPress editor you’re running, by far the easiest way to add a Youtube video is to copy the complete URL (it should look a little like this: https://www.youtube.com/watch?v=IyR_uYsRdPs) and paste it into the WordPress post or page! WordPress will recognize what you’re trying to do and will embed the video player for you.

All of this is thanks to a protocol called oEmbed. It doesn’t just work for videos either, it also works for Flickr photos, and Instagram posts, for example. You can find a list of websites and services which participate on wordpress.org.

Embedding a video or asset from any of these services is as easy as with Youtube; go to the media asset you want to embed, get its URL, and paste into the WordPress editor!

How to Embed Your Own Video in WordPress

What if you wanted to embed a video which isn’t hosted on any of these platforms into WordPress? This is where it gets a little trickier, but I’ll explain how to do it.

It’s perfectly possible to self-host your videos, but I wouldn’t recommend it for the following reasons:

Performance: hosting videos with your own provider can take up precious server resources, which are often shared with other websites.
UX (User Experience): by hosting videos yourself you’ll likely be missing out on all kinds of features that platforms like Youtube offer. Auto-selecting playback resolution, player controls, recommended videos and so on.
More Traffic: at the time of writing, Youtube is the second most visited on the web. Uploading your videos to it makes a lot of sense, as it gives you the potential to draw on all that traffic.

I Still Want to Self Host!

If you’re still determined to self host your videos, here’s how to do it with WordPress.

Begin by uploading your video to the Media Library (go to Admin > Media > Add New):

By clicking on the test-video.mp4 thumbnail seen here, I can copy the video’s URL.

Install FV Flowplayer Plugin

Go to Plugins > Add New and search for the FV Flowplayer Video Player. Install then activate it. There are plenty of plugins which do something similar, but this is my personal choice.

Add New Flowplayer

Go to FV Player > Add New and add a new player. Paste in the video URL copied earlier, or select it from the library.

The size is automatically detected, and you can add a splash image if you like.

Paste Shortcode Into Post

With that done, copy the shortcode you’re given–it will look something like [fvplayer id="1"]. You can then paste that into your WordPress post or page editor, and the player will be embedded!

Conclusion

If FV Flowplayer doesn’t suit your self-hosting needs, don’t forget you can find other video player plugins in the WordPress repository. Play around and see which one does what you need.

And of course, it’s always worth thinking about using a video platform like Youtube or Vimeo to make things even easier. That wraps up how you can embed videos in WordPress!