How to make YouTube videos 100% responsive for Blogger Template (Easy CSS Tricks)
 |
| How to make YouTube videos 100% responsive for Blogger Template (Easy CSS Tricks) |
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%;
|
| Step 1: Add CSS to Blogger Template |
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 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