How To Embed YouTube Videos In WordPress

Last Updated on September 20, 2022 by 13 Comments

How To Embed YouTube Videos In WordPress
Blog / Tips & Tricks / How To Embed YouTube Videos In WordPress

YouTube is an incredibly powerful tool. It handles storing, encoding, compressing and playing videos so you don’t have to worry about compatibility across an ever-increasing number of browsers and devices.

Adding YouTube videos to WordPress is fairly simple because of oEmbed support added in version 2.9. There are also plugins out there that can help you customize the look of your YouTube videos, organize them into galleries, and get the most out of media streaming on your site. In this article we’ll go over how to embed YouTube videos with WordPress out of the box, then move on to more advanced customizations.

Using oEmbed

oEmbed is a format which allows URLs to point to embedded content automatically. It will take a standard link, extract media from it, and embed it on a webpage. This has been integrated into WordPress fully for several versions.

What does this mean? You don’t need anything other than the URL of a YouTube video to add it to your page. Simply add that URL to your post editor and the YouTube video will be displayed on your posts.

Check out the features of the <a class="wpil_keyword_link" href="https://www.elegantthemes.com/gallery/divi/"   title="Divi theme" data-wpil-keyword-link="linked">Divi theme</a>.

[YouTube URL]

With lots of features to explore.

This also works with playlists. Simply copy in the URL, and this will be automatically embedded, with a playlist drop-down menu at the top of the video.

In the newest version of WordPress, adding this link in your post editor will render a preview of the video. That way, you can see what it looks like without having to preview the post.

Embedded videos in the WordPress post editor

See your embedded video, right in the post editor

When you paste in a YouTube link, the video embed will inherit all the default share functionality, and there is very little ability to customize a video without some complex filters. This includes videos that autoplay, a width that will typically fill the container that it’s in, a black control bar, and related content at the end of each video. In a lot of cases, this will be all that you need. If you don’t need fine-grained customizations of embedded content, oEmbed works great, and it is by far the simplest to get started with.

For those curious, it is not just YouTube videos that will be automatically embedded with a link. There is a list of services that this will work with, including Flikr, Vimeo, Hulu, Twitter and a lot more. The full list is on the WordPress codex.

Using the Embed Shortcode

The one caveat to the oEmbed method is that the URL must be included on its own line. If there is other content on the same line, this will be read as part of the embedded URL, and you will encounter an error. However, you can get around this by wrapping your link in the embed shortcode.
Embed shortcode in action

Extending oEmbed using Jetpack

For Jetpack users, there are a few more options available to you when using oEmbed. These can be implemented by appending a string to the end of a YouTube URL, which will define customizations for your embed. The first thing to do, however, is to install and activate the Jetpack plugin, then go to Jetpack -> Settings and click the Activate link next to “Shortcode embeds. With this enabled, we can start adding parameters right to our URL.

For example, oEmbed uses a default width and height when it embeds a video. However, you can choose your own width and height by adding “w=” and “h=” to the end of your URL.

[YouTube URL]&w=1280&h=720

These parameters are added and separated using an ampersand at the end of the URL. You can pass as many of these customizations to the URL as you wish, and there are several strings to chose from. The full list is on Jetpack’s documentation.

But to give you a sense of what can be done, let’s say that we want to start our video at the 85th second, remove related videos and use YouTube’s light theme. Our URL would end up looking like this:

[YouTube URL]&rel=0&start=85&theme=light

Here, the “rel” attribute is set to zero to remove related videos from the end of a video. “Start” and “stop” parameters can be used to signify at what point a video should be played from, and is measured in seconds. Lastly, you can choose either the light or dark theme to match your theme’s style.

There are several other ways to customize how a YouTube video is embedded apart from Jetpack, but if you are using it on your site already, it can be a simple way to customize YouTube videos individually.

Vixy YouTube Embed

Vixy YouTube Embed plugin

If you are running a site that depends heavily on video content, you may need something that’s a little more robust than what WordPress can do out of the box. Vixy YouTube embed takes advantage of all the customizations that YouTube has to offer so that you have more control over how embeds are displayed.

Vixy works by giving you access to a new shortcode, [youtube], which you can use to customize each embed. You can choose a custom width and height for videos, turn the audio off, remove controls, get rid of related videos, or chose a custom start and stop time. The full list of parameters is available in Vixy’s documentation, but you simply have to add your parameters to the youtube shortcode, and then wrap it in the video ID or URL of your video.

[youtube width=300 height=200 autoplay=true]
[YouTube URL or ID]
[/youtube]

Vixy also allows you to set up different profiles for videos with its own custom options. So one profile can automatically autoplay videos with no controls, while another can use a light theme with no related videos. If you set up your profiles, you simply have to reference them with the “profile” parameter in your shortcode and your selected options will be used.

Lastly, Vixy allows you to create a playlist of videos which can be embedded on any page. These will be shown to the user as a standard YouTube playlist, without you having to create one. You just create a new list in the WordPress admin, and they will be combined together. Additionally, Vixy features support for comment embeds and adds a widget for your sidebars.

Vixy offers a range of ways to customize your videos, and can get fairly complex. It has a pro version available as well, with even more advanced tweaks for embedded videos. But if YouTube embeds are something that is important to your site, then this level of customization may be necessary.

TubePress

TubePress

TubePress is a plugin built specifically for sorting Vimeo and YouTube videos into galleries. TubePress lets you set up defaults and pull video content from YouTube or Vimeo into paginated galleries. These videos can include a general search, say for “WordPress themes”, or a specific channel, user, or playlist. The gallery is automatically populated with the range of videos you selected. Using the TubePress settings page, you can customize the size of thumbnails, what information should be included for each video in your gallery, and how the player should look.

To include your default gallery in your site, you just need to include the [tubepress] shortcode. But you can also use shortcode parameters to completely change your YouTube gallery. This is mostly useful when you have a need for multiple galleries on the same site.

TubePress has some pretty smart defaults, but allows fine-grained control over your video galleries look and feel. It has a theming system if you need absolute control, and plenty of customizations with its shortcode. There is a free and pro version of the plugin available, the latter of which offers even more control over how your galleries look. For the average user this will be far too complex, but for any user that needs to add smart video galleries, it is a great tool.

Lazy Load for Videos

LazyLoadforVideos

When a YouTube embed is added to your page, it will load in quite a few external files, like CSS, JavaScript and images. This can slow down your page significantly if you have more than one video on each page. Lazy Load Videos is a plugin which gets around this by loading a static image with a play button first, and only loading in the full YouTube embed when a user clicks on it. This will ensure that all of the extra page weight of a YouTube video is loaded conditionally, and will speed up initial page load.

It’s a remarkably simple solution, and works automatically by hooking into oEmbed. The plugin also allows you to customize what image should be used, and the style and appearance of the play button. And because it is already hooking into embeds, Lazy Load Videos also gives you an opportunity to customize the look of your Vimeo or YouTube video player, though to a lesser extent than the plugins listed above. It keeps things simple and starts working the second you activate it.

Getting the Most Out of YouTube

As you very well know, YouTube is an ubiquitious platform used by millions of people. It’s also a great way for you to organize, distribute and share your content anywhere you wish. Out of the box, WordPress already has great support for embedded videos. With the tips in this article, my hope is that you have plenty of ways to get started customizing and making the most out of YouTube.

Article thumbnail image by issumbosi / shutterstock.com

Divi

Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

Get Started
Divi
Premade Layouts

Check Out These Related Posts

Splice Video Editor: An Overview and Review

Splice Video Editor: An Overview and Review

Updated on March 10, 2023 in Tips & Tricks

Video is a valuable form of content for social media. Unfortunately, creating quality videos is usually a long process that involves moving mobile footage to a desktop app for editing. However, mobile editing is on the rise. Apps such as Splice Video Editor make it possible to efficiently create...

View Full Post
How to Use Font Awesome On Your WordPress Website

How to Use Font Awesome On Your WordPress Website

Updated on September 16, 2022 in Tips & Tricks

When given the choice between using a vector icon or a static image, it’s a good idea to go with the vector. They’re small and fast to load, and they can scale to any size without a loss of resolution. Font Awesome is a superb library of vector icons that you can use on your websites,...

View Full Post

13 Comments

  1. Hello,
    I changed the height of my slider and then tried to change the height of the embedded youtube video located in the slider but I am being unsuccessful. Mind guiding me towards the right direction? Thanks!

    • Hey Jocobed, sorry you’re having that problem. If you’re using an Elegant Themes’ theme the best place for us to help you out with that is in our support forum.

  2. Kevin:
    I have a list of videos which is on a page. The list is in a specifiic order. then you click on the video name it points further down the page to a a<name= etc. and a line with a utube link to the specific video. The problem is it shows the video in the post and with each additional video the page load is getting longer. How do I get WordPress to load only the chosen video on a new page on the site when chosen and not on the post page. There are 30+ videos all on utube which takes a long time to load on the post page. I dont want the members to leave the website for utube. A lot of them are older and barely computer literate. This is what I'm using now – Curved Tail Dovetails, and


    https://youtube.com/watch?v=CJzlxflH02E
    Curved Tail Dovetails-video above

    Any help would be appreciated

    Thanks
    Jay

  3. Great blog. How can I mobilize my youtube videos, or videos in general for my mobile site?

  4. Is it possible to adapt youtube properties like width, height, width Lazy Load for Videos? Lazy Load for Videos only seems to work without any attributes whatsoever.

  5. We have embedded a YouTube video into a blog post – Video Format selected, but the video is not showing up for the blog thumbnail – it does show in the actual post. We have tried inserting it with the insert youtube button and with just pasting the link into the post. Any suggestions?

    • I am also finding the same issue of the video thumbnail not showing on the blog page. I have tried numerous techniques (even trying the video module first before the post title). Please inform. Sounds like several people are experiencing this. –Grateful for your time.

      (*My URL is on back end until launch.)

    • I am facing the same issue here. Have you found the solution?

  6. Kevin, I’m glad you posted the link to your plugin. I’m going to d/l it and give it a try. Lazy load seemed to be the only thing mentioned in this article that would give me the ability to change the video thumbnail… of greatest interest to me.

    Thanks for the article

    • Unfortunately Lazy Load doesn’t seem to allow a custom thumbnail either.

  7. Hi Jay,
    thanks for mentioning my plugin – Lazy Load for Videos!

    Just a quick question: Why don’t you link to your mentioned plugins (except for one)? This would make it easier for your readers to test the suggested plugins …
    So here’s at least the link to Lazy Load for Videos:
    https://wordpress.org/plugins/lazy-load-for-videos/

    😉

    Best regards,
    Kevin

    • Hi Kevin, does your plugin work together with Tubepress? thanks.

  8. I have a question about how to justify the video, meaning put it into content like you would an image, right or left.

    Thanks

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Get Started With Divi