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.

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.

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

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 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

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