How to embed videos in WordPress blog posts?
Is this the question bugging you? You shouldn’t stress out for a matter this trivial. I will show you how to do that.
The real question that you should be asking is ‘should you even use videos on WordPress blogs?’
Yes, you should.
Rich media like images and videos increase user engagement, and they can put across the message in a more concise way. No wonder thousands of businesses across the world are investing heavily on videos.
So yes, if your WordPress blogs allow room for videos, you should DEFINITELY use them.
Now coming to the question of embedding videos, how do you do that?
Let’s find out!
Easily Embed Videos in WordPress Blog Posts
WordPress is a powerful CMS. It has evolved for time. The current iteration of WordPress makes it super easy to embed videos from different video streaming sites.
You will not need any additional plugins to do the job. It is as simple as just pasting the URL of the video in the right place!
Since WordPress has moved to Gutenberg as its default editor, this tutorial will focus on that in details.
Yes, I will touch over the classic editor, but that will not be in great details. The reason why I will do this is that I will advice you to switch to Gutenberg.
All recent plugins and themes that are coming to market are mostly optimized for this new editor. Some of them have functions that can work only with Gutenberg.
So, it is better that you switch.
Okay, now that I have made my point, let’s begin.
Embedding Videos Using Gutenberg Editor
It all begins with opening up your blog post and create a new block where you want the video to show up.
Let’s work with a new post. When you create a new post on Gutenberg editor, this is what you see:
Notice that small + icon just underneath the ‘Add title’ area?
Click on it and then click on Browse All option. This is what you will see:
Once you click on the Browser All button, you will get the list of all available blocks. This is how it looks like:
Use there will be a scroll bar. Use it to scroll down until you reach the Embeds segment. The available options under the Embeds segment will show you the list of different services from where you can embed videos.
This is what it looks like:
You will notice various options like YouTube, Twitter, Vimeo, Spotify, Dailymotion, and more.
Select the platform where you video is hosted. For instance, if you want to embed a video from YouTube, select that. If the video is one Vimeo, use the Vimeo option.
Once you select something, you should see this:
In this example, I will embed a video hosted on Vimeo, and hence, I selected the Vimeo option. You can select any other platform that you want.
For instance, if you select the YouTube option, this is what you will see:
If you want to embed video from Dailymotion, this is what you will see:
Now, to embed a video, you just need to grab the URL of a video from the video hosting service, and paste it int the provided field.
This is how it looks like once I enter the URL of one of my videos hosted on Vimeo:
Once you paste the URL, click on the Embed button you see next to the URL field. Doing so will immediately pull the video from Vimeo and show it in that place. This is what happens when you click on the Embed button:
Now hit the publish button or the save draft button and check the frontend. If you have published it, check the published post. If you have saved it as a draft, preview it on a new tab.
This is how the embedded video looks like on the frontend:
That’s it! You have successfully embedded a video in your WordPress blog post. Now, to ensure that the video you have embedded resizes properly on different screen size, go to the post backend, click on the video block. This will show the block settings on the right side of the screen.
In the block settings, you will find media settings. Enable the option which says ‘Resize for smaller devices.’
Now, save or publish the post. The video should now automatically resize depending on the screen size.
You can even change the alignment of the video or make it full screen using the options available when you click on the video in the editor.
Play around and find out what works best for your website layout.
Embedding Video from Outside the Embeds List
WordPress already gives dozens of options from where you can embed the video of your choice. But what if you want to embed a video that is not hosted with any of the services you find in the Embeds block?
With the available options, all you need to do is grab the URL and paste it in the field.
This will not work if you want to embed video from a source not listed.
In a situation like this, you have to get the full HTML embed code of the video from the website where the video is hosted.
To embed the HTML code, go to blog editor and add a new HTML block by clicking on the small + icon and then searching with the text HTML:
After you select the HTML block, this is what you will see:
Now, paste the HTML code in the field.
Here is a video embed code I grabbed from Wikipedia:
You see that Preview button? Click on it to see how the video looks. This is how that video from Wikipedia looks like:
And this is how it looks on the frontend:
The Wikipedia video is actually an animated GIF, which is a better option than adding a video. Even Google suggests doing that (if possible).
Of course, the dimension of the video will depend on the actual dimension of the video or animated GIF you are embedding, and there is nothing much you can do about that!
Well, that’s all about embedding videos in WordPress blog posts using the Gutenberg editor.
Embedding Video Using the Classic Editor
When you try to embed video using the Classic editor, you don’t get the choices you find with Gutenberg.
However, the process is pretty simple. You need to grab the URL of the video you want to embed and paste it in the editor.
The only problem with the Classic editor is that you cannot adjust the width of video. You cannot even make it full-screen.
This is another reason why I do not recommend using Classic editor at all!
Embedding Videos in WordPress FAQ
Ah! A very interesting question!
When you play a video, it requires bandwidth. What happens when hundreds of visitors watch the video at once?
The amount of bandwidth that you will require may not be available for your hosting package. This is especially true for shared hosting environments.
Do not forget that even if you are on a VPS server or a cloud server, you will still have limited resources. Cloud server will allow you to scale and increase bandwidth anytime you need, but that attracts additional costs.
Why do you want to pay extra?
Platforms like YouTube, Dailymotion, Vimeo, etc. have the necessary infrastructure and the bandwidth to serve millions of viewers at once. Take advantage of their resources.
Yes, there are various plugins available. Those plugins made sense when there was no Gutenberg editor and you had to take care of the responsiveness of the videos you embed.
With Gutenberg, you don’t have to worry about responsiveness. You can simply enable the resizing option and you are good to go.
You don’t need any extra plugin to do this job for you. Remember, more plugins mean more codes, and more codes mean increased chances of conflicts and errors.
If you still want to try out plugins (that I totally do not recommend), you can look into these options:
YouTube by EmbedPlus
VideoZoom
YouTube Gallery
Feed Them Social
Video Gallery – YouTube Gallery
There are several other plugins that will reveal themselves upon a quick search in the plugin repository.
I will say once again – do not use plugins. They may look fancy and beautiful, but they aren’t the best choice.
If you want to create video galleries, use Gutenberg’s default editor can create a ‘columns block,’ and add videos in each row of each column. That will be a smarter idea.
Yes, there will always be a slight impact because the video is on another domain. This means that your website will load scripts from a different site.
To minimize this impact, you can do two things:
Lazy Load videos and iframes using a plugin. There are caching plugins that can do that for you. For instance, you can use WP Rocket cache. In case you want a separate plugin, the plugin named Lazy Load for Videos.
Another thing you should do is prefetch the DNS of the domain from which you are embedding the video. DNS prefetch function is available with several caching plugins including WP Rocket, LiteSpeed Cache, Perfmatters, etc.
That’s pretty much everything that you need to know about embedding videos in WordPress blogs posts. Of course, you can embed videos elsewhere such as widgets, footer, pages, etc., but I will suggest not to do so unless absolutely necessary.
Adding videos on footer or widgets will mean that they load on every single page of your website. This will have an impact on your overall site speed. At the end of the day, speed matters!
