For responsive embedding youtube video

I have finally settled down thanks two helpers as follows:

I have struggled for a long time to get my YouTube videos to keep their ratio on different screen sizes. Reference (2)

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device. Reference (1)

Blogger -> design -> theme -> customize -> advanced -> add css

.embed-responsive {
position: relative;
overflow: hidden;
padding-top: 56.25%;

.embed-responsive-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;

Check result

View page source

Copy the relevant part and paste it on the new post


1) Responsive helpers

2) Responsive Iframes with One Great CSS Trick

Post a Comment

Previous Post Next Post