DesignWall

How-to: Embed YouTube videos into WordPress

how to embed youtube video into your WordPress site

YouTube is now the biggest video sharing site in the world. As the need to embed a YouTube video onto a web platform is continuously growing, you’ll be surprised to know how easy it is to get a YouTube video on your WordPress site..

In this article, I’m going to guide you through the steps involved, while explaining in details on the benefits of embedding a YouTube video over uploading it directly to your host. I’ll also be sharing a few tips and tricks on the embedding optimization.

Excited yet? So let’s dive in.

A. Host your own video or upload it onto YouTube?

Instead of uploading directly to your host which is no longer a common practice, you can upload it to YouTube (or using other video sharing services such as Vimeo), then embed the code onto your website. Let’s go over a few pros and cons of using an embedded YouTube video over hosting your own.

Sharing has never been easier

It is much easier and convenience to share YouTube videos or other video sharing sites in a few simple steps while self-hosted videos is more difficult to manage, share and it’s time consuming.

Save your bandwidth

Video files can be quite large in size and take up most of the available space on your server. So why don’t let YouTube handle the pain? Sad but true, the embedded YouTube videos always load faster than the self-hosted one.

Increasing traffic

The more people share your YouTube video, the more popularity your video is going to generate. All thanks to the convenience of sharing.

Optimize video quality

YouTube automatically optimizes the video’s quality, sound, light, noise, and etc. It gives your audiences multiple options to choose from regarding to their internet connection.

Still want to host your own video? I bet not. Let’s go in the steps to Embed a Youtube video into your WordPress.

B. Embedding YouTube videos into WordPress

So you want to embed this <ahref=”http://www.youtube.com/watch?v=zKN5r2CHxk0″ title=”Premium WordPress themeDW Trendy”>video into your WordPress to look something like this:

There are three ways to embed a YouTube video into WordPress, and here is the how you can achieve the same:

1. Using iframe

This method can be applied to different web platform and is not restricted to WordPress or any other CMS. To insert a video using iframe, first you need to navigate to the tab Share >> Embed then copy the iframe link as in the box below.

Embed YouTube code using iframe

Got the code? Now come back to your article, toggle to Text Editor and paste the previous code into your content. You can customize the length and width of the video as needed..

Customize video length and width

2. Embedding with a URL

WordPress now supports oEmbed to make embedding videos into your blog post even easier. Instead of using the long iframe code as mentioned in #1, all you need is to copy and paste the video URL into your article as in the screenshot below.

Paste your code into the Article Editor

Using this technique, you can embed video from different video sharing sites as listed here.

3. Using shortcode

This method is similar to Embedding with a URL technique, however, here you can also customize the video size by putting your URL between these two tags:

 ...

Embed your video using Shortcode

C. Tips & tricks on embedding YouTube videos in WordPress

1. To start a video at a certain time stamp

Let’s say you want to play your video at the 2nd minute instead of starting from the beginning, using the same video as the previous example, you just need to add ?t=2m or #t=2m as below.

Applied for Using shortcode technique)

 http://www.youtube.com/watch?v=zKN5r2CHxk0?t=2m

Applied for Embedding with a URL

 http://www.youtube.com/watch?v=zKN5r2CHxk0?t=2m

Or start=120 (applied for the iframe technique) at the end of your video URL.

 <iframe width="560" height="315" src="//www.youtube.com/watch?v=zKN5r2CHxk0?start=120" frameborder="0" allowfullscreen></iframe>

2. Center your embedded video

All you need is a) toggle over to the Visual editor then b) add an opening and closing <center> tag to the beginning and the end of the code, then you should have something like this:

Here is how you center your embedded video if you’re using the iframe:

 <center><iframe width="560" height="315" src="//www.youtube.com/watch?v=zKN5r2CHxk0" frameborder="0" allowfullscreen></iframe></center>

Here is how it goes if you’re using the Embedding with a URL technique:

 <center></center>

3. Embed YouTube video into the Text Widget

YouTube videos can be easily embedded into the Text widget by using iframe. However, this is not the case for the oEmbed. If you want to insert video into text widget using oEmbed, add the following code in your theme’s functions.php file.

 add_filter( 'widget_text', array( $wp_embed, 'run_shortcode' ), 8 );
add_filter( 'widget_text', array( $wp_embed, 'autoembed' ), 8 );

Save the file and now you can enjoy another convenient way to embed your video to Text widget.

Embed YouTube video using oEmbed

4. Responsive Video

At default, your embedded YouTube video is not responsive regardless your current theme is responsive or not. Therefore, I would like to introduce you a handy plugin that can help you sort out this problem: Fitvids for WordPress.

Go ahead to install and activate the plugin, all the embedded videos on your website will automatically be responsive without any further configs. If you want to change the settings on FitVid, go to AppearanceFitvids.

In short

These are just a few tips & tricks to help you optimize in embedding a YouTube video onto WordPress. If you have better ideas/tips/tricks, please do leave a comment in the comment section below. We’d love to hear.

Exit mobile version