How to Embed Responsive YouTube Video in WordPress

Before we start with the steps, do you know that why the YouTube video is important in blog posts these days?

Do you know?

According to survey of Cisco, (Largest networking company in the world), the amount of Internet video consumption is going to grow fourfold from 2016 to 2021, that is about 31 percent.

 

As of now, people have started to consume videos frequently at large scale because of fast Internet and increase in smartphone sales.

 

Keeping these figures in mind, anyone who is having a website should start embedding relevant videos to make user experience more impressive.

 

Methods to show video on WordPress site:

1. Upload video to WordPress-

Rendering video each time from database will decrease your page speed as it requires lots of bandwidth as well as good network connection. So, uploading video to WordPress is not considered as good option.

2. Show YouTube video in WordPress-

If we link a YouTube video to our site, the video will be rendered directly from YouTube and your Database will not suffer any extra requests. The pages will load faster and videos will be rendered on the fly. This makes smooth user experience and is a good SEO practice.

 

Advantage of adding YouTube video

  1. Clarifies the topic to user.
  2. Users will spend some more time on that page then usual.
  3. Use of images and videos adds up for optimizing on-page SEO.
  4. It will promote your YouTube channel, if embedding videos are from them.

 

Also see – How to optimize Images in WordPress to rank better.

 

I have three methods for embedding YouTube videos in WordPress. All of them will vary according to the requirement.

 

For appropriate method, the table below shows the requirement and corresponding method to follow to embed YouTube videos.  Jump to appropriate method you like.

 

Method 1Method 2Method 3
Direct EmbedGreen tick
ResponsiveGreen tickGreen tick
Video Player CustomizationGreen tickGreen tick
Video Position CustomizationGreen tick

 

NOTE: Please don’t install additional plugins in your WordPress theme as it will slow down your site browsing speed. Always opt for an alternate way. To embed YouTube video, use methods and don’t use plugins.

 

Method 1 (Fastest way)

1. Go to the YouTube video you wish to embed in your page.

 

Click Share video-Embed Responsive YouTube Video in WordPress     copy YouTube video URL-Embed Responsive YouTube Video in WordPress

 2. Right click the video and select “Copy Video URL” or Click on “Share” and copy the link.

 

paste YouTube video URL-Embed Responsive YouTube Video in WordPress

3. Go to your WordPress page/post editor and directly paste this link.

4. What? It’s done. If you have a good internet speed, the video will be rendered in that editor at same time. Otherwise, click on Preview of that page and check. Your video will start displaying on that page.

5. Click on “Update” button to complete.


 

Method 2

1. Go to the YouTube video you wish to embed in your page.

 

Click Share video-How to Embed Responsive YouTube Video in WordPress

2. Click on “Share” link below the video.

 

Click on Embed tab-Embed YouTube Video in WordPress

3. Click on “Embed” tab.
4. You will see the preview of the video which will be embedded by the link in input field.

 

YouTube Player Controls settings-Embed Responsive YouTube Video in WordPress    Copy YouTube Embed link-Embed Responsive YouTube Video in WordPress

5. You can control Video Size, Player Control options, etc. Choose your required features and copy the video embed code from input field.

 

Select Text Editor and paste YouTube Link-Embed Responsive YouTube Video in WordPress

6. Open your WordPress page and in editor, you will find “Visual” and “Text” editor modes. Select “Text” and Paste the given link at the place you need the video.

7. Click on “Preview“. You will find the video embedded with the size you selected.

8. Click on “Update” to get permanent changes.

 

NOTE: The video you embedded by this method might not be responsive. (Not suitable for all devices). To make it responsive, you need to add some CSS code in “style.css” file of your theme. See Method 3.


 

Method 3

 

Repeat steps 1 to 5 from method 2.
Now,

 

inserted youtube URL inside div tag-Embed Responsive YouTube Video in WordPress

6. Open your WordPress page and in editor, you will find two editor modes. Select “Text” and
paste your copied code inside <div> tag of html.

<div class="video-container">
your copied code goes here
</div>

7. Open “Appearance” from left panel of WordPress controls and Click on “Editor”.

8. The default opened file should be “style.css” of your current theme. If it’s not opened, then scroll and search this file and open it.

9. Copy the below code and paste in the editor.

 

.video-container {
  position:relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}
.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 

10. Click “Update“.

11. Preview your post by changing width of your browser. The video will get adjusted accordingly. So you have embedded a responsive YouTube video in your WordPress post.

12. If you want to change positions of the video, then you can change CSS property values accordingly. For an instance, add left:10px; after padding-top: 25px;. It will leave some space from left side of the screen. You can adjust accordingly.


 

That’s all. Please share your thoughts in comment section below about the above article.

Keep Blogging!

How to Embed Responsive YouTube Video in WordPress
4.6 (92%) 5 votes
Summary
How to Embed Responsive YouTube Video in WordPress
Article Name
How to Embed Responsive YouTube Video in WordPress
Description
1.Go to the YouTube video you wish to embed in your page. 2.Right click the video and select "Copy Video URL" or Click on "Share" and copy the link. 3.Go to your WordPress page/post editor and directly paste this link. 4.Click on "Update" button to complete.
Author
Publisher Name
Apoorv Sukumar
Publisher Logo

Apoorv Sukumar

A blogger and a Software Developer, exploring trending technologies in market. A philomath, web explorer, who learns many things and want to deliver them to the world. Founder of wantextra.com

You may also like...

Leave a Reply

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