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.
- Log into your Blogger Blog’s Dashboard.
- Now Click on the “Template” Option present in the left hand side. The screenshot is shown below:
- After that, Click on “Edit HTML” option. Below given screenshot shows the same:
- 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>
Post a Comment