How to Embed Videos in WordPress

In this tutorial, you will learn:

• How to embed YouTube and Vimeo videos into WordPress posts and pages.
• How to enable extra shortcodes with JetPack.
• How to enable shortcode support in Widgets.
• How to embed YouTube videos into Widgets.
• How to embed YouTube playlists into posts and pages.
• How to show YouTube videos in a lightbox.

Steps for Embedding Videos into WordPress with Plain Video URLs

1. Embedding a video into WordPress is often as simple as pasting in the video URL into a post or page. Many video providers are supported including YouTube and Vimeo, which I will demonstrate today.
2. First, copy the video URL from YouTube.
3. From within your WordPress Dashboard, create a new post by clicking Posts, then Add New.
4. Give the post a title, and paste in the URL. Providing that the URL is pasted plainly without being hyperlinked, and is on its own line in the editor, WordPress will be able to leverage the OEmbed API to get the Embed HTML needed to display the video. You should see the video immediately within the Editor.
5. You can do the same with a video from Vimeo. Let’s do that now. Copy a Vimeo video URL to the clipboard, and paste it above your YouTube URL in the Post Editor, and view your changes.

Steps for Adding the YouTube Shortcode to Allow Video Embedding

1. You can get finer control over YouTube videos, as well as include them in Widgets, by using a Shortcode. The YouTube shortcode is a feature of JetPack so you will need to install Jetpack to use it.
2. The video above covers the exact steps for installing and activating JetPack, because the process is slightly different than typical plugin installation.
3. After JetPack is installed, enabled, and connected with WordPress.com, click on JetPack, then click on Settings.
4. Click on the Writing tab. Then activate Shortcode Embeds by sliding the slider. Now you can use the YouTube shortcode, and others, for embedding video and other Media.

Steps for Testing Shortcode Support in Widgets

It’s possible that the steps for adding shortcode support for Widgets aren’t necessary for your web site because your currently activated theme, or any of the activated plugins, may have added shortcode support for Widgets already.

1. To test this, first copy a YouTube video URL to your clipboard.
2. Then go to Appearance, Customize, and Widgets.
3. Choose a Widget Area such as Sidebar, and click on the Add a Widget button.
4. Scroll down and find the Text Widget and give it a click.
5. In the Content area of the widget type an open square bracket, then the word youtube, then a space, then paste the YouTube URL, then type in a closing square bracket.
6. In the Live Preview screen, if you see the video, then you are in luck. Otherwise, you will see just your shortcode text. If that’s the case, that means that shortcodes are currently not enabled for Widgets on your web site. Let’s correct that now by creating a small plugin.
7. First, you can save your changes, or else copy your shortcode, so you can quickly paste it back in later after enabling shortcode support for Widgets.

Code used in the above steps:

[youtube https://www.youtube.com/watch?v=TX6dXRL-jPU]

Steps for Adding Shortcode Support in Widgets

I find that it’s very easy and straightforward to use the Pluginception plugin to create a small plugin for purposes such as this.

1. To get started, in your WordPress Dashboard, go to Plugins, then Add New.
2. Do a search for Pluginception, then click Install, and then Activate.
3. Now, under the Plugins menu is a new link called Create a New Plugin. Click that link.
4. Give it a name such as Add Shortcode Support for Widgets, and then click the Create a Blank Plugin button.
5. Now copy in the code seen on the screen.
6. Click the Update File button.
7. Now, go back and see if the video is now rendering, by going to Appearance, Customize, and Widgets. Paste in your shortcode into a Text Widget if it isn’t already there.

Code used in the above steps:

add_filter('widget_text','do_shortcode');

Steps for Embedding YouTube Videos into Posts, and Pages Using Shortcodes

Now, let’s embed a YouTube video into a Post using a shortcode.

1. Start by going back to the Post Editor for any post, and have a YouTube URL ready.
2. In the Content area of the Post Editor type an open square bracket, then the word youtube, then a space, then paste the YouTube URL, then type in a closing square bracket. Save and preview the post.
3. You can append values to the YouTube URL to modify the display, such as change the width and height, change the start and stop times in the video, affect the alignment and style of the player, etc. To change the dimensions of the video to 320 by 240 for example, append &w=320&h=240 to the YouTube URL and Save and Preview these changes.

Code used in the above steps:

[youtube https://www.youtube.com/watch?v=TX6dXRL-jPU&w=320&h=240]

Steps for Embedding YouTube Playlists into Posts, and Pages

Now, let’s embed a YouTube playlist into a Post.

1. Start by getting the URL for a YouTube Playlist. It’s very similar to a regular YouTube Video URL, but will have a list= parameter appended to it.
2. Now, just like pasting a YouTube URL into the Post or Page Editor, you can paste this Playlist URL plainly, and on its own line. Do so, and Save and Preview how the Playlist looks on your web site.

Steps for Displaying YouTube Videos in a Lightbox

Now, let’s go through the steps to add a YouTube video to a light box, using the WP Video Lightbox plugin.

1. First, install the WP Video Lightbox plugin. From inside the WordPress Dashboard, click on Plugins, then Add New.
2. Do a search for WP Video Lightbox. Click Install Now, and then Activate.
3. This time, rather than getting a YouTube Video URL ready, we just need the ID, which is the part after the v= in the Video URL. Get that now before continuing.
4. Create a new Post by clicking Posts, then Add New.
5. Add a title for your post, and in the content area add the lightbox shortcode. As seen on the video or below the written instructions, the shortcode is as follows: type an open square bracket, then type video underscore lightbox underscore youtube, then a space, then video underscore id, then equals, then open quote, then paste in the Video ID from the previous step, then close the quotes, then a space, then width equals open quote, the desired value, then close quotes, then a space, then height equals open quote, the desired value, then close quotes, then a space, then auto underscore thumb equals open quote, the number one, then close quotes, and close the square bracket.
6. Save and test.