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

https://koreainforum.blogspot.com/2019/04/supplementary-videos.html


View page source

Copy the relevant part and paste it on the new post

Reference

1) Responsive helpers
https://v4-alpha.getbootstrap.com/utilities/responsive-helpers/

2) Responsive Iframes with One Great CSS Trick
https://blog.theodo.com/2018/01/responsive-iframes-css-trick/

Comments