How to Embed Video in WordPress the Easy Way
Videos make a site expressive. Videos give life to website presentations. If an image is worth 60,000 words, so much more does a video.
You can embed videos in posts, pages, and sidebars and widgets.
Only you need to choose a powerful theme with supports embedding video files in all of the above website areas.
Videos can mean a single file, multiple videos in a carousel 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
Embed videos blog posts from an external source (such as YouTube)
First, login in to your WordPress Admin dashboard with the username and password you set up. Choose the page/post you want to place your video in, and start editing.
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 in 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.
The embed code has the following form:
<iframe width=”956″ height=”538″ src=”https://www.youtube.com/embed/8AZ8GqW5iak” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
Here’s an example of embed code from Vimeo:
Click on the Share button to get the embed code. It has the following form:
Copy the embed code and paste it into your page or post.
Where to place the embed code in Gutenberg editor
Click on the +sign to add new block. This will display the panel with further options, Embed included:
Paste the embed code into the HTML of the page:
Then, when you switch to content preview, the video will be displayed:
Where to place the embed code, in classic editor
First, make sure you have the text (HTML) version open in the page editor:
Paste the embed code in the section where you want the video to appear.
Then, switch to visual editor, and you’ll see the video inserted into the page:
Inserting videos with a link, instead of embed code (the easy way)
Open your page and start editing its content, for including video files. You’ll open either the Gutenberg editor, or the traditional WordPress editor.
In the Gutenberg editor, you just have to copy the link to video in an empty new block. WordPress will then fetch the embed code and the video files will display in the page:
This is the editing interface where you’ll include the video file you want to present to users. In the editing interface, you can adjust the parameters for the video you have inserted into the post.
Customizations for the video file:
- 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;
- You can duplicate the video;
- You can insert text before the video;
- You can insert text after the video;
- You can edit the video as HTML;
- You can add the video to reusable blocks and re-insert it into a different post or page.
In the image below, if you need to click on the three bullets sign to expand the panel with more options for video customizations:
In the classic editor, likewise, you need to copy and paste the link to the video file in an empty new section. WordPress will then fetch the embed code corresponding to that link and the video will be displayed in that page or post:
Embed uploaded videos in blog posts or pages
For page Hero background
For example, you may want to upload a video file to set as background for the homepage/inner pages Hero. It’s good to have such a feature in your theme; you have to open the Customizer and start making changes.
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:
For page Hero content
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
- Text with media on 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 keeping 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.