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.
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%;
Best Tips and Tricks for you:
- How to get the DNS CNAME Records of Blogger website Again
- How to Add Watch Website Demo Live
- How to add Popup Download Button with Ads and Timer in Blogger
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>
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.