How to make any Video Screen Responsive in WordPress and Blogger?

Due to the popularity of Smart Phones and Tablets, Most of the Web designers will recommend you to use “Screen Responsive”  Layout in your website or blogs. As you all know, WordPress and Blogger are two best platforms for blogging . WordPress supports Theme whereas Blogger Platform supports Templates. Few months ago, I provided the List of Best 5 Free Screen Responsive Blogger Templates  on this blog. Now, So many users are using these templates and they thanked me for providing this list. However, They also complained that their embedded video appears stretched in Small Screen Devices. I got similar complaints from WordPress users, Who were using Screen Responsive WordPress Theme. Due to this reason, I have decided to provide you a Fix for this.

We can make any video, Screen responsive either by using CSS or Javascript/JQuery. In this tutorial, I will show you both methods. If you don’t know the meaning of “Screen Responsive“, See the above figure. It shows how, an YouTube video appears normally in all kind of Screens. Normally, We make our website, Screen responsive for better user’s experience.

How to make any Video Screen Responsive in WordPress?

As I said earlier, There are two ways of making an YouTube video Screen Responsive.  WordPress supports Plugins as well so we can accomplish this task in 3 ways.

Method1: By using FitVids Plugin

  • Open your WordPress Admin Dashboard. You can do this by logging into http://www.yoursite.com/wp-admin
  • Now, Go to Plugins>>Add New. The screenshot for the same is shown below:

  • You will see a new window. Simply, Type “fitvids” in the Search textbox and hit the “Search Plugins” button. The screenshot is given below:

  • You will see “fitvids” plugin in search results at the top. Simply, Click on “Install Now“. See the below given screenshot:

  • Once done, Activate the Plugin by clicking on “Activate Plugin” option. The screenshot is shown below:

  • After activating the Plugin, Navigate to Appearance>>FitVids. You will see a new screen. See the below given screenshot:

 

  • In this screen, Put a check mark on the check box which says “Add jQuery 1.7.2 from Google CDN” . In JQuery Selector field, use “.post” . I am using this class because WordPress automatically adds “.post” class to its articles. Once done, Click on Save changes.

  • That’s it. You have made your embedded videos, Screen responsive. Test your wordpress blog in different screen and check the video. Enjoy.

Method 2: By using CSS

Use of so many Plugins can make a wordPress blog heavy which may irritate users. To avoid this, You can use CSS for accomplishing this task. The steps for doing the same are given below:

  • In the admin dashboard of your WordPress Blog, Navigate to Appearance>>Editor. The screenshot is shown below:

  • Now, Click on “Style.css” file because you will have to add some CSS codes in this sheet. If your theme doesn’t have “style.css” file, try to look for “stylesheet.css”. See the below given screenshot:

  • Add below given CSS codes at the end of  this file.
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
  • Once done, Click on “Update File” button. You have done 80% of your task.
  • To make your embedded Video, Screen Responsive, use the “<iframe>” code inside the “<div id=”video-container”></div> in “Text Editor” which represents HTML editor in WordPress Blogs. See the below given example:
<div class=”video-container”><iframe width=”640″ height=”360″ src=”//www.youtube.com/embed/ZfYYz1ytPUQ?feature=player_embedded” frameborder=”0″ allowfullscreen></iframe></div>
  • That’s it. You are done. Use the same div everytime while embedding any Video in your Blog.

Method3: By using Script

  • For making your embedded videos, Screen responsive in WordPress using Script, Navigate to Appearance>>Editor. See the below given screenshot:

 

  • Now, Click on “header.php” file. The screenshot is shown below:

  • In “Header.php” file, add the below given scripts just above closing head tag i.e “</head>” .

<script src=jquery.fitvids.js></script>
<script>$(document).ready(function(){
$(“#your-video”).fitVids();
});
</script>

  • Now, You can make your embedded video, Screen responsive by using id=”your-video” in div element in Text editor which represents HTML editor screen in WordPress. Always use your iframe code inside “<div id=”your-video”></div>“.  For example, see below:
<div id=”your-video”><iframe width=”640″ height=”360″ src=”//www.youtube.com/embed/ZfYYz1ytPUQ?feature=player_embedded” frameborder=”0″ allowfullscreen></iframe></div>
  • That’s it. You are done.
How to make any Video Responsive in Blogger?
In Blogger, We can accomplish this task either by using CSS or by Script. Both methods are explained below:

Method 1: Making Video Responsive By using CSS Codes

  • Log into your Blogger Blog’s Dashboard.
  • Now Click on the “Template” Option present in the left hand side. The screenshot is shown below:

Template option in Blogger
  • Facebook
  • Twitter
  • Google+
  • Pinterest
  • Facebook
  • Twitter
  • Google+
  • Pinterest

  • After that, Click on “Edit HTML” option. Below given screenshot shows the same:

Edit HTML option in Blogger
  • Facebook
  • Twitter
  • Google+
  • Pinterest
  • Facebook
  • Twitter
  • Google+
  • Pinterest

  • In “Template Editor” , Press Ctrl + F button on your keyboard and search for “]]></b:skin>“. See below given screenshot:

  • Add the below given CSS Codes just above “]]></b:skin>“. It will be used to make your video, Screen resposnive.
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
  • Once done, Click on “Save Template” button. Now, You can make your video Screen responsive by using your iframe codes in “<div class=”video-container”></div>” in HTML mode while writing contents in Post or Pages. See the below given example:
<div><iframe width=”640″ height=”360″ src=”//www.youtube.com/embed/ZfYYz1ytPUQ?feature=player_embedded” frameborder=”0″ allowfullscreen></iframe></div>
  • To make your embedded video Screen responsive, always use your iframe code in above given format.

Method 2: Making Video Responsive by using Scripts

  • Log into your Blogger Blog’s Dashboard and click on “Template” Option. The screenshot for the same is shown below:

Template option in Blogger
  • Facebook
  • Twitter
  • Google+
  • Pinterest
  • Facebook
  • Twitter
  • Google+
  • Pinterest

  • Now click on “Edit HTML” button. The screenshot is shown below:

Edit HTML option in Blogger
  • Facebook
  • Twitter
  • Google+
  • Pinterest
  • Facebook
  • Twitter
  • Google+
  • Pinterest

  • In “Template Editor” window, Press “Ctrl + F” button on your keyboard and search for “</head>” tag. The screenshot is shown below:

  • Just above “</head>” tag, add the below given scripts:

<script src=jquery.fitvids.js></script>
<script>$(document).ready(function(){
$(“#your-video”).fitVids();
});
</script>

  • Once done, Click on “Save Template” button. After that, You can make your video screen responsive by using your iframe code inside “<div id=”your-video”></div>”  in HTML editor window in Post or Pages. See the below given example:
<div id=”your-video”><iframe width=”640″ height=”360″ src=”//www.youtube.com/embed/ZfYYz1ytPUQ?feature=player_embedded” frameborder=”0″ allowfullscreen></iframe></div>
  • That’s it. Use the same format every time while writing  contents on your Posts and Pages. Enjoy.
From the Editor’s Desk
Now a days, Smartphones, Tablets and Phablets are ruling the internet world. I am not saying this after the report of a survey, Which shows that more than 65% websites are accessed via these devices. Due to this reason, You should make your video Screen responsive so that users can watch your video comfortably on different devices.
For your convenience, I have provided 3 methods for accomplishing this task. Use the one, Which suits you best. By using Makewebvideo, Create an animated Promotional video for your website or business and Upload it on YouTube. Once done, Embed it in your blog after making it responsive. In case of any problem, Feel free to ask me for help.
Ravi Kumar
 

Hi Guys. I am Ravi Kumar, the owner and Editor of this Blog. I am a Computer Science Engineer and a full time Blogger. I write articles on topics related to Blogging, SEO,Web designing,WordPress,Blogger,Content Marketing,Technology,CPA marketing and much more. However, My main aim is to help other bloggers. You can follow me on Twitter,Facebook and Google+

Click Here to Leave a Comment Below 0 comments

Pin It on Pinterest

Read previous post:
Get custom Google Plus Url
How to get Custom Google Plus URL for your profile and business pages?

From last 3-4 weeks, I was consistently getting notification from Google that, They have released "Custom Google Plus Url" for...

Close