How Do You Add A Video To Wordpress Blog

Embed videos to WordPress

Videos make a site expressive. Videos give life to website presentations. If an image is worth 60,000 words, a video is worth way much more.

And this is kinda obvious when you realize that in June 2021 TikTok was the most downloaded app for the 4th month in a row! And Youtube has +2 billion users.

What does this mean for you?

That video must be on your to-do list when creating assets for your website and marketing campaigns.

So, let's start with learning how to embed videos in WordPress. You can embed videos in posts, pages, and sidebars.

Videos can mean a single file, multiple videos in a carousel, and even Vimeo links or YouTube playlists. It's up to you whether to insert any of these variants into your website, to make it more appealing.

Here's how to embed videos in a WordPress website

This is no rocket science. It's all straightforward.

We'll be discussing two types of video embedding:

from external sources such as Youtube or Vimeo;
locally-hosted videos.

I'm going to show you how to embed videos in WordPress both in the Classic and Default editors.

How do you know if you're using the Classic Editor or the Default one (also called Gutenberg)?

Well, the Classic one should look like this:

Classic WordPress Editor

The Default Editor looks like this:

Default WordPress Editor

Embedding videos in WordPress from external sources

Embed videos in pages or blog posts from an external source in the Classic WordPress Editor

First, login into your WordPress Admin dashboard with the username and password you set up. Choose the page/post you want to place your video in, and hit "Edit".

Edit a page in WordPress

The embed code is a piece of HTML code that you can add to your website so the content you want to provide to your readers (video) is shown on the page.

Here's an example of embed code from Youtube. Right-click on the video and a panel with the options above will display. Click to copy the embed code and then paste it into your page.

copy Youtube's embed code

You can also go below the video and select "Share". You will see some options there such as Facebook, Whatsapp, etc. We are now interested in the "embed" option.

Choose when to start the video

Here you also have the option to select the moment when to start the video, because you might only want to highlight a certain moment inside of it.

Now, the embed code has the following form:

What's great is that you can adjust the size of the video, just try playing with the values for width or size.

Here's an example of embed code from Vimeo. If you hover over the right-hand side of a video, you'll see some icons showing up. Select the one that allows you to share the video.

Vimeo embedding

Here you have the embed code. Below you'll also see some options. If you tick them, the code will change.

Vimeo video embedding options

Copy the embed code. Now, in order to paste it, we will need to switch from the Visual Editor to the Text one.

Switch to the HTML WordPress editor

Now, you will see the HTML code behind your page or post. Paste here your code. Now, it can be a bit tricky to understand exactly where to do this. You can use CTRL F to identify a specific phrase after which you want to place the video. You can preview your video when going back to the "Visual" editor. If it doesn't look ok, place it somewhere else.

If it still doesn't look ok, we've got some easier options presented below.

This option with code embed is a good one when you want to make edits to the size of the video as shown above.

Else, you can skip to the chapters about "Inserting videos from an external source with a link, instead of embed code (the easy way)".

Embed videos in pages or blog posts from an external source in the Default WordPress Editor

For the process of obtaining the embed code, you can check the chapter above.

So, you now have your needed code. What should you do with it?

Form the WordPress dashboard, open your desired page or post.

Simply paste your code here.

Embed Vimeo video inside a WordPress page

Inserting videos from an external source with a link, instead of embed code (the easy way) in the Classic Editor

Start by opening your desired post or page.

Now, you can either:

paste the URL of your video
go to Add Media -> Insert from URL and paste your URL.

With this option, you can not adjust the size of the video.

Add media by URL

Inserting videos from an external source with a link, instead of embed code (the easy way) in the Default Editor

In the Gutenberg editor, you just have to copy URLnk to the video in an empty new block. WordPress will then fetch the embed code and the video files will display on the page:

Vimeo URL pasted in the WordPress Default Editor

You also have the following blocks available to insert videos:

Video – you can select here the "Insert from URL option".

WordPress video block

Add videos from the Media Library

Youtube
Vimeo

Now that you have inserted your video, you can make some edits to it if you have some minimum HTML know-how. All you need to do is select the video, and click on the three vertically-aligned dots in the menu above the video. Select the "Edit as HTML" option.

The menu above the video will also allow you to:

Align the video to the left, at the center, or to the right;
Edit the URL of the video file – you can replace the video with another file of your selection, any time you open the editor;
Duplicate the video;
Insert a new block before the video;
Insert a new block after the video;
Add the video to reusable blocks and re-insert it into a different post or page.

Inserting locally hosted videos in WordPress

Now that we know how to embed videos to WordPress from external sources, it's time to see how we can use locally hosted ones.

For this, we will be working with the Media Library. You can start by going there from the WordPress Dashboard. When I'm working with media of any type, I like to bulk upload it, and, just select it from there, whenever I want to place a video or an image on a page or post.

WordPress Media Library

When you go to "Add New" you can upload or drag and drop your desired files.

Upload files to the Media Library

Now that the files are up, let's add them.

Inserting locally-hosted videos in the WordPress Classic Editor

It's time to go to a page or post.

Place your cursor where you want to insert your video. Next, go to "Add Media" next to the upper menu.

If you've previously uploaded your media, you will find here your file. I usually name my files with relevant names so that I can find them easily. add media to a page

You can filter media by type or date, but also search by name. Just select your needed file and it will be added to your page.

Inserting locally-hosted videos in the WordPress Default Editor

I've mentioned in a previous chapter that there is a block called "Video" available in the blocks panel.

Just go to the "+" sign in the upper-left and open the blocks panel. Look for the "Video" block. Select it.

WordPress video block

Now, you can upload your own video, or you can select "Media Library". You can now pick a video from your already uploaded ones.

Add videos from the Media Library

And that was all!

Adding videos in WordPress using the Customizer

Let's say you may want to upload a video file to set as a background for the homepage/inner pages Hero. If you have a flexible theme, you can do this inside the Customizer. You can access it from Appearance -> Customizer.

Here's how to do this with Mesmerize, a theme that has multiple options and increased customization flexibility:

Open the Customizer. Go to Hero -> Front Page Hero/Inner Pages Hero.
Go to the subsection Background -> Background Type. Then, select Video as the background type you want to set for your page Hero.
In the list of options for this background type, you have to click on Select Video to upload a self-hosted video into the page background:

You may also want to include a video file in the content of your homepage/inner pages Hero. This will add some dynamism to the presentation, capturing users' attention effectively.

We keep the example of Mesmerize.

Open the Customizer. Go to Front Page Hero/Inner Pages Hero.
Go to the subsection Content -> Content layout. Then, select Text with Media to display in the page Hero.

In this theme particularly, you have the options to select:

Text with media on left;
Some Text with media on the right;
Text with media above;
Text with media below.

Make sure the media type is set to Video.

For video as page content, you have only the option to provide a link to an external video source. This is for optimal performance reasons (see in the next section).

From the dedicated section, Media Box Settings, you can make customizations to the video file:

Vertical alignment of the video
Video Auto Play (when users open the page, the video will automatically start playing)
Mute video (when users open the page and start watching the video, the sound is automatically disabled)
Loop video (when users open the page, the video starts playing; once that video ends, it starts playing again, in a loop).

It's better to use externally hosted videos instead of self-hosted ones. Here's why.

It's best practice to use externally hosted videos. Here's why:

Self-hosted videos affect page load speed which is a major drawback in website performance
Externally-hosted videos help to keep server resources at an optimal level
Self-hosted videos, due to decreased page speed, account for a poor user experience.

Once you've added the video, it's time to optimize.

We listed below some functions and features you should consider, for video optimization and improved website performance:

Enable lazy loading – this feature refers to loading the video at the moment it is needed, and not instantly while opening the page. This results in increased page load speed.
Mobile-responsive video – this allows for videos to display optimally when mobile devices (mobile and tablet).
Autoplay – this is a feature that allows a video to automatically start playing, when users open a page.
Loop – the video file is set to play in a loop. That means, once the video file has ended, it starts playing again.
Mute video – when the video starts playing, sound is disabled; this means the video item will not impede users' browsing down the page. In case they want to pay special attention to the video, they have the option to unmute it.

6. Open video in lightbox – when users click on the video element in a page, the video will open in a lightbox and start playing. Once the video has been watched, users simply close the lightbox window and continue browsing the page.

Now that you've learned how to embed video in WordPress, it's time to insert videos in your website. Happy customizing!

Alina

Alina Belascu

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.