Integral One-page Business Theme

A simple, elegant & responsive one-page theme excellent for professionals, agencies and businesses!

Live Demo Free Download

There are 4 ways to add/embed Youtube videos in your WordPress posts, pages and sidebars. They are,

  • Using oEmbed
  • Using the embed shortcode
  • Using an <iframe>
  • Using a widget (in your sidebar)

I’ll walk you through each of the steps and explain them in detail.

Using oEmbed

This is the quickest and easiest method. You simply need to copy and past the Youtube video URL into WordPress.

You can find the URL by clicking on the Share button in Youtube, it appears beneath the video and to the right of the title, just above the Subscribe button.

Youtube Share Button

Then click on Copy in the popup.

Copy Youtube video URL

This will copy the video’s URL to your clipboard. Next, you will return to your WordPress dashboard and paste that link into your post or page. On it’s own line, like this.

Past the video URL into WordPress

It’s important that you past the link when in the Visual tab of the editor and on it’s own separate line, otherwise it won’t work.

Within a few seconds the video will appear in your editor.

Youtube video appears in your post or page

This works because of a technology called oEmbed. There are other types of content you can insert into WordPress just by pasting the URL in your post screen.

With the release of WordPress 4.4, you can now embed content from anyone who supports the official oEmbed protocol. Here is a list of sites that you can embed content from.

Service Content Type
Amazon Kindle Instant Previews
Animoto videos
Cloudup videos, galleries, images
CollegeHumor videos
Dailymotion videos
Facebook post, activity, photo, video, media, question, note
Flickr videos, images
Funny Or Die videos
Hulu videos
Imgur images
Instagram images
Issuu documents
Kickstarter projects
Meetup various types
Mixcloud music
Photobucket images
PollDaddy polls, surveys
Reddit posts, comments
ReverbNation music
Screencast.com videos
Scribd documents
SlideShare presentations
SmugMug various types
Someecards.com ecards
SoundCloud music
Speaker Deck presentations
Spotify music
TED videos
Tumblr various
Twitter tweet, profile, list, collection, like, moment
VideoPress videos
Vimeo videos
WordPress plugins plugins
WordPress.tv videos
YouTube videos, playlists

Using the embed shortcode

When editing a post or page click on the Add Media button to the top, left hand corner of your screen. It will look like this,

Add Media button

To insert your video select the Insert from URL option. Then paste in the Youtube video URL.

Paste the Youtube video URL

Then video will then appear in your post or page, just like the previous method. The advantage of using this method is the customization options it offers. It contains two parameters that allow you to set a maximum width & height on your embed. But you will have to switch over to Text mode in the editor to add these parameters.

For example:

Set width and height in embed shortcode

 

Using an iframe

If you want even more flexibility, then using an iframe is the best option. It requires a few extra steps and involves editing a line of code, but it’s not difficult.

Start by grabbing the iframe code from Youtube. Like in the first method, click on the Share button next to the video and then select the Embed option. You’ll then be presented with a preview of the video along with the iframe code and a couple customization options. Once you’re satisfied, copy the iframe code.

Youtube Video iFrame Code

Go back to your WordPress editing screen, and click on the Text tab and paste the code on it’s own line, where you want the video to appear.

Now you can add the URL parameters to customize your video.

We can make some changes to an embedded Youtube video’s behavior just by attaching parameters to the end of the Youtube URL inside the iframe. The following example causes the video to automatically play when it’s loaded:

We attach autoplay=1 to a question mark following the original Youtube URL in this case. Refer to Google’s Youtube Embedded Players Parameters page for the full list of supported parameters.

Here’s a few of them:

Parameter Description
autoplay Set this parameter to 1 to auto play video. Default is 0, which disables auto playing. Note that auto playing a video is disabled on certain mobile platforms and browser combinations such as Chrome and Safari mobile.
controls Sets whether the video player controls are displayed:

  • controls=0: Player controls do not display in the player. For IFrame embeds, the Flash player loads immediately.
  • controls=1 (default): Player controls display in the player. For IFrame embeds, the controls display immediately and the Flash player also loads immediately.
  • controls=2: Player controls display in the player. For IFrame embeds, the controls display and the Flash player loads after the user initiates the video playback.
start The time in seconds from the beginning of the video to start playing.
end The time in seconds from the beginning of the video to end playing.
loop In the case of a single video player, a setting of 1 causes the player to loop the initial video when playing *.  In the case of a playlist player (or custom player), the player plays the entire playlist and then starts again at the first video.*Note: This parameter has limited support in the AS3 player and in IFrame embeds, which could load either the AS3 or HTML5 player. Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL, for example:
playlist A comma-separated list of video IDs to play. If you specify a value, the first video that plays will be the video originally specified in the iframe’s URL, and the videos specified in theplaylist parameter will play after that.

Here’s an example of how that would look:

https://www.youtube.com/embed/SbQc_JLUH7k?autoplay=1&loop=1&start=5&end=8&playlist=96kI8Mp1uOU

If you want to test this out on a video before implementing on your website you can play around with the code here.

Using a widget

To place a Youtube video inside one of your sidebars, the process is slightly different. You will need to utilize the native Video widget provided within WordPress. However, this Widget is only available in WordPress version 4.8 and above. It makes adding a video very easy.

In your Admin Dashboard navigate to Appearance > Widgets and select the sidebar you want to add the video.

Drag and drop the Video widget into the sidebar.

Add Video widget to sidebar

You can then select to upload a video or insert from a URL like in one of the previous methods we discussed.

Upload or insert video into widget

Once you’ve selected your video click on Add to Widget where you’ll be presented with a preview.

Preview video in widget

If you’re satisfied, click Save to publish the widget to your sidebar.

That wraps up this tutorial, if you have any questions or comments, use the form below.

Sharing is caring!

Published by Hans Desjarlais

Founder @ Themely, entrepreneur and travel addict. Always learning, maverik at heart, speaks 3 languages and hope's to go to space one day.

Leave a Reply

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

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match