A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Embed a YouTube Video in WordPress – Classic Editor and Gutenberg

How to Embed a YouTube Video in WordPress – Classic Editor and Gutenberg

Whatever the reason you’re running a website, you would naturally appreciate having your audience more engaged, as their engagement can bring you a lot of benefits. One of the best and most natural ways to inspire your site visitors to stay longer on a certain page and interact is to have quality videos displayed on strategically chosen pages. Many choose to embed videos on their homepage or to set a video as a background and that’s not without a good reason. Amusing, educational, inspiring, informative or instructional media materials have a huge impact on your website’s image, and can even influence your conversion rates.

If you are now wondering where to get these kinds of videos up your own website, the answer is simple – you can embed YouTube videos or upload your own. And, no matter what your choice is, adding a video to WordPress is simple and requires zero coding knowledge. In this article, we will show you, step by step, how to add videos in three different ways:

Embedding a YouTube Video in Classic Editor

Here are the steps for the easiest way to embed a video from YouTube:

  1. First, log into your WordPress. Then, go to the page/post you want to add video to and find a place where you want to add it in your content.
  2. Go to YouTube, find the video you want to add and use the full URL in your browser’s location bar:
full URL

The other way to copy your URL is to select the Share option below. Afterward, simply click the Copy button, and you have successfully copied the URL of the video.

Share option

We have to note that there is one awesome option that allows you to set your video to begin at a certain point. Just check the Start at box and add the time that you want your video to start from.

Start at
  1. Now, go back to your page/post and simply paste the URL address (blank paragraph is a great place to do so), and the preview of the video will appear. Like this:
Paste the URL address
  1. Now, all that is left to do is click the Update button, and your video is finally live and will appear on your page or post.

If you need more advanced options, like changing your video’s display size, here’s another way to add it:

  1. Select the Share button located below your video. This will make the YouTube Embed option appear.
Embed
  1. Copy the HTML code:
Copy the HTML code
  1. Paste it here (make sure to use the Text editing mode):
Text editing mode
  1. Hit the Update button, and that’s it! You are now able to edit the width and height of the video. You can find it in the HTML code you have copied.

Embedding a YouTube Video in Gutenberg

Gutenberg editor comes with embed blocks that allow you to insert content from other sources, including videos. There is also a specific block for YouTube videos, which you can find in your Gutenberg block list.

Gutenberg block list

You should know that YouTube block only allows you to insert the URL of the video.

YouTube block

Therefore, if you want to insert an <iframe> element and some other attributes, you will have to do it in the text block.

You Tube

Embedding a YouTube Video in Elementor

Elementor offers you two different ways to add a video. One way is to use the Text Editor Block, and the other is to use the Video Block, which is specifically made for this purpose and therefore is more appropriate for YouTube vidoes, but both ways enable you to embed videos to your page.

Embedding a YouTube video in Elementor

After you click on Edit with Elementor, choose the Text Editor block then drag and drop it in the content area. Then go to the video that you want to add and copy the full URL in your browser’s location bar, and you are pretty much done.

Another way to add video with Text Editor is to select the embed option and click Copy button, and you have successfully copied the URL of the video. Basically, you add video using the Elementor Text Editor in the same way like you add video with the Classic Editor.

Add video using the Elementor Text Editor

If you choose to go with the Video block which allows you to also add videos from Vimeo, dailymotion or even selfhosted videos, you’ll find a few more convenient options for playing the video too.

Add video using the Elementor Video block

You start by choosing the Edit with Elementor option, and then you select the Video block and drag and drop it to the content area. In the menu on the left you will see two tabs, choose the content tab.

Video block content tab

Now, you will see several options, first you choose source of the video, in this case let’s go with YouTube.

Then go to the page with the video you want to embed and copy the video URL in the Link area. You will immediately be able to see if you chose the right video.

Basically this is it, you have now added the video and you can continue to set more advanced options.

The Autoplay option is at your disposal, if you choose it, your video will start playing automatically the moment your page is loaded.

The Play Control option that follows refers to whether or not you want the control (Play and Pause) buttons to be visible on your video. If not, select Hide in this field.

Another cool feature is the Image Overlay, which is great if you want to maximally personalize the look of your video and avoid the default image that shows up in the beginning. Just click the Image Overlay option, then choose the Show option, then select an image from your Media Library and the selected image will appear on top of your video.

Conclusion

Now that you are familiar with the basics of adding YouTube videos and posts into your WordPress page you can spice up your website and enjoy the benefits that come with cleverly chosen quality video content. In case you wonder if there is more that you can do with videos on your website, you are right. There are plenty of WordPress YouTube plugins that offer more advanced options such as creating playlists, styling their appearance and more. But, no matter how you choose to add media on your website, one thing is sure – videos make your content appear more dynamic, attractive and informative.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply