How to make YouTube videos 100% responsive for Blogger Template (Easy CSS Tricks)

Manish Kumar

23 Nov, 2021

I am writing this article to help beginner bloggers. who are facing problem with their templates. As you have read the title. I would like to help my fellow bloggers to make all YouTube videos responsive by default for their blogger template.

Today you will be learn the CSS tricks that helps you to make all YouTube video responsive by just using YouTube videos link. Hopefully you will get a solution regarding your query "How do I make my youtube video responsive on Blogger?".

Before starting this article, I would like to request you to follow all steps and save your current Blogger Template before add CSS to it.

Today I am sharing a simple and easy trick that helps you to make YouTube embed videos responsive to your blogger website (BlogSpot). If you want to make your video responsive for any device or any media size. Then you can do so in many ways. But here is a simple and easy way that makes you comfortable to do this task.

Easy Steps to make YouTube video responsive for any blogger template.

By using following process, one can enable its blogger template to make all YouTube video responsive by default. Please follow the below given steps.

Step 1: Add CSS to Blogger Template

Step 1: Add the following CSS in the style section. ADD Responsive code to <Head> Section You have to create a class to create a responsive video. So you need follow the below explain steps.

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}

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

how to make YouTube videos responsive, How do I scale an embedded YouTube video, How do I embed a YouTube video into CSS, How to make youtube video responsive in blogspot.

Step 1: Add CSS to Blogger Template

Best Tips and Tricks for you:

How to add CSS in Blogger Template:

Step 1. Go to blogger dashboard - Themes - Edit HTML.

Step 2. Now find following code <Head> <b:skin> or <b:skin.

Step 3. Now add the following CSS class code after body class. Responsive Iframe Video CSS.

Step 2: ADD YouTube Responsive Code for Posts

Step 2: ADD Responsive <div> class to your video in the post.

After write/add above mansion CSS code to blogger theme HTML. Now you only have to do one thing add all embedded iframe between <div class='video-container'> <iframe code YouTube embedded code> </div>

Example: Once you add following code in your <head><style>

	<div class='video-container'>
<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/embed/CrEMZrR0pyA" width="480">
</iframe></div>

Step 2: ADD YouTube Responsive Code for Posts

I hope this article will be helpful for you. Please do share your valuable feedbacks in the comment section. You can also share this post to help others.

Manish Kumar

I am owner of this blog bloggerlly.com as well as runs socialstatusdp.com and Hindi Bhashi. My expertise are Graphic Design, UI Design, Illustration. My hobbies are Web Development, Codding, Writting, Video Creating. I like to learn new things online. You can follow me on Instagram.@doodlemanish

How to make YouTube videos 100% responsive for Blogger Template (Easy CSS Tricks)