Make Embedded YouTube video responsive in blog (with images).

Since latest update of Google panda algorithm, website design based on responsiveness to mobile devices has become a real big deal. And all this is done in order to favor the majority of present and future generation which seems to be much based on the use of high-end mobile devices especially Smartphones Tablets and iPad. 

Did you know this? Videos and images in all top ranked blog must be clearly seen without any cut, whether a blog is viewed from a small screen device or larger one. Now i have only one question to you, "Do you make embedded YouTube videos in your blog responsive?"

How to Make YouTube Video Responsive on Blogger (with Pictures)

It has been annoying when you know that visitors who enter your site from tablet or smartphone find the video or image in your post are not seen well. Usually this is used to be a turn off to them and makes them not to visit your blog. This isn't good at all as it increases the bounce rate and it ends up making you loose valuable trust from missing search engine's credits by not making a user friendly layout for high end mobile devices. 

As a blogger you must value your visitor by making sure of your layout arrangement and template design to be responsive in any device especially on Smart phones.

How to make the video responsive.

Here is the step by step solution on how to set up your embedded Video to become responsive.

Recommendation: It's always better to backup your template before doing any customization on the codes inside it.1. Log-in to your Blogger account.

1. Go to Template > Edit HTML 

2. press CTRL + F and search for the code </style>

3. Add this code just above it:

       
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

See example:

Then Click Save Template

4. add this code to every embed codes of the video to be made responsive.

<div class="video-wrapper"> YouTube embedded code </div>

Replace the words "YouTube embedded code" with the link of a video. 

see the example below

 That's how to do it!!.

• Tweet
• Share
• Share
• Share
• Share