Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
This CSS lets you wrap an iframe with a div using the class 'responsive-embed-container embed-responsive-16by9' to make it 16:9 responsive
.responsive-embed-container {
position: relative;
display: block;
overflow: hidden;
height: 0;
max-width: 100% !important;
.embed-responsive-16by9 {
padding-bottom: 56.25%;
aspect-ratio: 16 / 9;
.responsive-embed-container iframe, .responsive-embed-container object, .responsive-embed-container embed {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment