Now 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.

• You will see a new window. Simply, Type “fitvids” in the Search textbox and hit the “Search Plugins” button.

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

• Once done, Activate the Plugin by clicking on “Activate Plugin” option.

• After activating the Plugin, Navigate to Appearance>>FitVids. You will see a new screen.

• 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. 

• 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”.

• 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.

<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.

• Now, Click on “header.php” file.

• 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 usingid=”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.

• After that, Click on “Edit HTML” option.

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

• 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:

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

• 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.