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.
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..
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.
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:
...
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.
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 Appearance → Fitvids.
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.
