make responsive YouTube embed video for blogger template
Hey guys, thanks to reaching out to my blog. Today I am going to share a technique 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.
Take these steps to create YouTube video responsive for any blogger template.
Step 1: Add the following CSS in the style section.
ADD Responsive code to <Head> SectionYou have to create a class to create a responsive video. So follow below mansion steps:
1. Go to blogger dashboard - themes - Edit HTML.
2. Now find following code <Head> <b:skin> or <b:skin.
3. Now add the following CSS class code after body class.
Responsive Iframe Video CSS
.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 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>

I hope you will now create every time a responsive youtube video for your Blogspot website.
Check This Out:
ReplyDeleteThugsofBD.com - Know For Sharing | Bangladeshi Tech Forum and Community.
Check This Out:
How To Write Quality SEO Articles To Increase Visitors
I admire the way you explained everything which is very easy to understand .Thank you so much for publishing this beautiful post. I am also writing article relating to this topic you may check :
ReplyDeleteTechnical Bishnuji
1. Killer Tips To Become Successful Blogger
2. Palki 2 Responsive Blogger Template >> Free Download
3. How To Get Adsense Approval Fast-2020
4. Holi Viral Wishing Script Free Download
5. YouTube SEO 4 Ways To Rank YouTube Channel
6. 10 Common Mistakes You Should Avoid Before Applying For AdSense
7.6 Different Ways To Make Money From YouTube
8. What Is Domain Authority (DA) ? Complete Guide To Increase
9.How To Submit Your Website To Bing
10.List Of WhatsApp Group Link For Youtubers
Your site is beautiful to look at and the articles are also very useful. Thank you very much.
ReplyDeleteYou Can see our article .
MR Laboratory
How to lock facebook profile
Top 5 ways to earn income online
How to Install the Yoast SEO Plugin for Blogger Blog । SEO Tricks
YouTube's secret tips and tricks. Best Hacks for You
https://www.mrlaboratory.info