make responsive YouTube embed video for blogger template
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.

You have to follow steps to make YouTube video responsive for blogger post. Find CSS Trick for responsive YouTube embed.

ADD Responsive code to <Head> Section

You have to make 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 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%;
}

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>


3 Comments

Manish Kumar Blog

Post a Comment

Manish Kumar Blog

Previous Post Next Post