Responsive Youtube Embed

ADDING BLOGGER CSS

The Blogger platform offers us two options for adding in our CSS. You can add it in as part of your blogger template or you can add it in separate from the template.

So which one is right for you?

Well, adding CSS separate from the template is a great option if you have custom CSS you want to keep, even when you switch your template for a different one. Maybe you have gadget CSS that you don’t want to lose track of when you switch to a different premade theme. The nice thing about having your own custom CSS separate from the theme’s CSS is that it is easy to find when you need it and easy to pull out when you want to switch templates.

Adding the CSS to the blogger template will keep all you CSS together and allow you better visibility into the CSS that is already there. You may be trying to add CSS through the separate option, but it doesn’t work because there is CSS in your template that is overriding it. I like having all of my CSS in one place and going into the Blogger template really isn’t that scary :)

So first let’s talk about the separate option. After you click on the orange customize button, you go to Advanced and then Add CSS. The cool thing about Blogger’s Template Designer is that it makes changes to the view below as you add in CSS. That’s a nice way to see how something will look before you click the Apply To Blog button and everything goes live!

IMPORTANT NOTE: When you upload a new template to your blog, the CSS in this separate section will be deleted. If you’re adding in CSS here, make sure you copy this CSS somewhere else, before you upload the template

Responsive YouTube css

CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Ví dụ:
Bạn tạo bài viết mới, chứa thẻ embed code của Youtube vào trong thẻ div video-container là xong.
HTML:

<div class="video-container">
    <iframe allowfullscreen="" frameborder="0" height="480" src="https://www.youtube.com/embed/nTAZU71eBus" width="854"></iframe>
</div>