In this article, we're going to be discussing how to embed a video in WordPress. There are a couple of ways, each with their own pros and cons, and we're going to take a look at all of that in this article.

There are several reasons that you would want to embed a video into WordPress - videos increase retention rates, can sometimes be the best way to explain things, and may even result in an SEO.

There are multiple video formats, from the traditional .MOV and .MP4 as well as new and modern formats like the .WebP Video. Let's quickly run over the two major ways that you can add /embed videos in your WordPress website. Then we'll go in depth on each topic and how to embed the video using that method , while also discussing the pros and cons.

• Third party video embed (YouTube or Vimeo)
• Self hosted video embed (same server)

third party video embed

this is probably the most common way of embedding a video into your WordPress website. It's very simple and easy to do. First, you'll want to upload your video to the third party platform. The two most common platforms for WordPress are YouTube and Vimeo, each of which are easily embeddable into your WordPress website.

Once you've uploaded your video to your third party platform, you can embed it onto your WordPress website using two major ways. The first way is by simply copying and pasting the link into the Gutenberg editor. If you're using one of the major video editors, Gutenberg will recognize this and create a video player automatically.

You can also search for the YouTube / Vimeo embed blocks within Gutenberg if the automatic identification feature isn't working. Simply find the embed block for your specific third party video hoster and paste the link into the input field.

Another way of embedding a third party video into your WordPress website is by using an iframe.

All third party providers have ways to create embed codes, but for this example will be using YouTube. On your video, right click and then select copy embed code. This will automatically generate an iframe code for your YouTube video, which can easily be pasted into the Gutenberg editor (or anywhere on your WordPress website). this iframe code will embed a video onto your WordPress website, without the need for any special Gutenberg block.

Here's what a typical iframe embed code for a video on WordPress looks like:

<iframe width="1263" height="480" src="https://www.youtube.com/embed/2JlhvL5OTrE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Code language: HTML, XML (xml)

You can even make your own iframe code, you just need to know the source URL of the base video file.

Once you have your iframe code, you can add it to your WordPress website in a manner of ways. The easiest way is using the Gutenberg editor, adding an HTML block, and pasting the iframe code into that HTML block. If you're using a theme builder, there are typically HTML blocks.

As you can see, it is fairly easy to embed a YouTube video or any additional third party video onto your WordPress website using the Gutenberg block editor, or manual methods.

Now, let's take a look at how to embed a video into your WordPress website that is hosted on your own server.

Hosting videos on your own WordPress website

You can also choose to host videos on your own website. However, we recommend using the third party video method for most use cases. That's because hosting videos on your own server takes up a lot of storage, and uses a lot of bandwidth. This isn't good for anybody involved, and a third party service is specifically designed to do this.

However, there is a use case where it is better to host the video on your own server as opposed to a third party service. That's when the video is extremely small, only a couple of seconds. usually, this video is depicting how to do a specific step in a tutorial.

This style of video fulfills the same role as a GIF, except it takes up a lot less room on your website. We always recommend converting gifs into videos and embedding them on your WordPress website using this method. However, don't do this for any video that goes over 20 to 30 seconds. If that's the case, then you should be using a third party service to do this.

Once you've recorded your short video, we recommend compressing it down to be as small of a file size is possible. This makes it load faster on the front end, and take up a lot less room on your server.

Then, using the Gutenberg editor, add a video block.

Once you've added your video block, you can upload, select from the media library, or even insert a video from a URL. Because we're self hosting the video, we're going to upload it onto our own server. Once you've uploaded the video, it will automatically display in line with the rest of your content in Gutenberg.

As you can see, this video is 15 seconds . We would recommend that you don't go over 20 to 30 seconds with the self hosting video method. The video is already embedded in our WordPress website, and if we want we can leave it at this step. However, there are a couple of other settings that we're going to set on our WordPress website to increase the user experience.

We want this video to act more like a GIF. The three defining characteristics of GIFs are that they automatically play, are short, and continuously loop. GIFs Also don't have any video controls or audio.

We can easily set up our video embed in WordPress to do this. On the right-hand panel of the Gutenberg editor, you'll see that there are several settings pertaining to your video embed that can be changed around.

Under video settings, were going to toggle autoplay on, loop the video, played muted, remove playback controls, and played in line. A combination of all of these controls will make our video embedded into WordPress act more like a GIF.

If you need to, you can also change the preloading settings, and set a poster image (which is the same as a thumbnail image in YouTube).

Conclusion

This article presented the two major ways that you can embed a video into your WordPress website. Both utilized the Gutenberg block builder which is a core feature of WordPress, and something that makes everybody's lives a lot easier. If you have any other methods of embedding video content into your WordPress website that doesn't fall into these two categories, we'd love to know in the comment section below.