More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I embed videos in a project, and obviously want them to be responsive and well behaved whatever the size of the terminal.
You all know that setting the video object to width:100% won’t be enough to make it look good since the height/width ratio won’t be respected.
Seen this at btconf, during Ethan Marcotte‘s talk, and thought I would use this pure (+ simple + clever) css technique. As I looked for it again on the web, I found it hard to locate it so the reason of this blogpost.
.video-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.video-container > * {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
There’s a codepen for it.
So long.
My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.
Follow @shoogledesigns
