3 ways to embed YouTube videos in WordPress

Sharing videos on your website is an excellent way to grab your visitors’ attention, keep them engaged, and increase their time on your blog posts and pages. WordPress makes it super easy to embed videos from video hosting platforms, and since YouTube is by far the largest one, we’ll focus on this one today.

In this article, we’ll present three different methods to embed YouTube videos to your WordPress website without the use of plugins. As a bonus, you’ll also learn how to make videos ready for mobile devices.

3 ways to embed YouTube videos in WordPress

1. Embed a YouTube video with the Gutenberg Embed block – the easiest and recommended way

In Gutenberg, embedding a Youtube video is as easy as pie. First, go to YouTube and open the video you want to embed. Now click on the share button and a popup will open up on your screen where you’ll find the video link at the bottom.

How to get a link for the YouTube video.
Get a link for the YouTube video.

Copy the link and head back to your WordPress admin panel.

Bonus tip. If you want your video to start at a later point – not at 0:00 – check the “Start at” box and enter the precise time you want your video to start at when the user plays it. Don’t forget to copy the video link after, as it has changed – a URL parameter has been added to the end of it.

Start playing a YouTube video at a later point.
Start playing a video at a later point.

In the WordPress post you’re editing, click on the plus icon to add a Gutenberg block and select Embeds > YouTube.

Important note! If you’re not familiar with the new WordPress Gutenberg editor, you can learn the basics in our Gutenberg blocks series.

How to Embed a YouTube video in Gutenberg.
Embed a YouTube video in Gutenberg.

You’ll see an input appear where you can paste the URL you’ve copied before. Click the “Embed” button, and that’s it! You’ve successfully embedded a video to your post.

Paste the YouTube video link here to embed it.
Paste the YouTube video link here to embed it.

This method should work for most cases, but it has a few limitations. You don’t have full control of how the video is embedded. So if that’s what you need, you should probably use the second method.

You've successfully embedded a YouTube video to your WordPress post!
You’ve successfully embedded a YouTube video to your WordPress post!

2. Embed the video iframe by using the Gutenberg Custom HTML block

While this method takes a bit more time, it offers more customization possibilities for embedding your Youtube videos. Unlike before, you’ll have to get the whole iframe code snippet on YouTube, not just the video link.

First, go to the video you want to embed, click on share, and select the Embed option.

Get the video iframe code snippet on YouTube.
Get the video iframe code snippet on YouTube.

In the Embed Video screen, you have a few configuration options which you can change to set the starting time of the video and hide player controls. Make sure you set up everything and copy the iframe.

Copy the video iframe code.
Copy the video iframe code.

Head back to the WordPress post or page you’re editing. Select the Custom HTML block from Formatting blocks.

Use a custom HTML block to embed a video.
Use a custom HTML block to embed a video.

Once added, paste the iframe code to the block. You can preview the results before publishing. At first glance, the outcome is the same as in the method above. So why should you bother embedding the iframe then?

Preview the embedded iframe in the custom HTML block.
Preview the embedded iframe in the custom HTML block.

Well, the difference is that now you can tweak the HTML code of the iframe. You can, for instance, deny users the option of playing the video fullscreen by removing the “allowfullscreen” attribute from the iframe. Or you can change the height or width of the video. In any case, you’ll need to be a little bit familiar with HTML otherwise you’re much better off using the first method.

3. Embed the video with the old WordPress editor

If you’re not keen on the Gutenberg editor, you can use this method instead. First, get the link of your YouTube video (as described in the first method) and paste it in your post/page content. The video will be displayed automatically. WordPress comes with a great feature that automatically fetches the iframe code from popular video sharing websites like YouTube.

For fine-tuning, switch to the text editor view where you’ll now find the whole iframe embed code.

Make your videos responsive

Your video is almost set! But there is one more important thing you need to take care of after embedding it. YouTube iframes are 560px wide by default. Since most of the mobile devices are smaller, the video will overflow the screen, which is a big issue for mobile usability.

The easiest way to fix that is by adding a line of CSS code to your WordPress website. This single line of code will make all iframes, not just the ones from YouTube, fully responsive. In other words, the video will never take up more than 100% of the screen on any device, which is what you want.

In your WordPress admin panel, go to Appearance > Customize > Additional CSS. All you need to do now is copy & paste the line of code below and hit the Publish button to save the changes.

iframe { max-width: 100% !important; }
Make your iframes responsive by adding this line of CSS to your WordPress website.
Make your iframes responsive by adding this line of CSS to your WordPress website.

You only need to add this code once, and it will apply to all your videos, including those you might embed in the future.

Advanced tip! If you’re comfortable with messing around a bit with PHP, you can also enable responsive embeds by adding the following code snippet to the functions.php file of your WordPress theme.

add_action( 'after_setup_theme', function() {
    add_theme_support( 'responsive-embeds' );
});

What is your preferred method for embedding YouTube videos to your content? We’d love to hear from you in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *