 |
| make responsive YouTube embed video for blogger template |
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.
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>
Post a Comment
Manish Kumar Blog