Simple CSS code for making YouTube videos 100% responsive for Blogger Template, YouTube Videos Responsive with CSS, YouTube Videos Responsive CSS, YouTube Videos Responsive with CSS for blogger template, blogger YouTube Videos Responsive CSS,

Make 100% YouTube Videos Responsive with CSS for Blogger Template

Spread the love

This article will useful for all beginner blogger users who turn their blogger template 100% YouTube Video Responsive. Here is the Simple CSS code for Making 100% YouTube videos responsive with CSS for Blogger Template.

I am writing this article to help beginner bloggers. who counter problems with their blogger 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 learn the CSS tricks that help you to make all YouTube videos responsive by just using the 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 adding 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.

See also  3 Easy steps to migrate website from WordPress to Blogger?

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

By using the following process, one can enable its blogger template to make all YouTube videos 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 to follow the below explained 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 the body class. Responsive Iframe Video CSS.

Step 2: ADD YouTube Responsive Code for Posts

Step 4: 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>
Make youtube video responsive code
Step 2: ADD YouTube Responsive Code for Posts

My Words: I hope this article will help you to make youtube videos responsive to your blogger template. please let me know in the comment section if you need any other help regarding this article. you can also subscribe for our notification.


Spread the love

Leave a Comment