Embed URL


SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Responsive video

Copyright (c) 2011 ZURB,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
.flex-video {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
margin-bottom: 16px;
overflow: hidden;
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
.flex-video iframe,
.flex-video object,
.flex-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.flex-video { padding-top: 0; }

While searching for ways to get this done I also found this:

kgb4000 commented

Yes this worked well. Thanks buddy. Credit given.
Tried using FitVids.js. Didn't do what I wanted it to do.

Worked like a charm, thanks.

sebheg commented

Nice! Thank you indeed!

Great stuff. Thanks!

Like it - thanks for sharing!

Perfect. Thanks!


I am really new to web development and to github as well.

And I would like to use this piece of code in my website.
I see this under the section'public' and there is a copyright attached as well.
The file name is MIT-LICENSE.txt.

So,two questions?
a)Can I use this code by giving an attribution?
b)And, if I do use it, under which license can I use this and what sort of attribution should I give?

Can anyone please shed some light on this?


Would love to see this built into bootstrap! This is very awesome!

works like a charm when i use it in development... as soon as i deploy to heroku, the CSS no longer works...even using the same exact browser

edit fixed my issue. removed all the precompiled assets locally. re-committed, pushed to heroku, let heroku pre-compile on its own, and now it's working. awesome!

Awesome! Thanks!

Worked perfectly! You are the man!

Works well for me. Thanks. One question though: What does the media query in the end do? It doesn't seem to make much difference for me. And why so many very specific queries - some special devices you are targeting?

Thanks you ! Awesome ! :)

Awesome! Works perfect. Thanks!

Perfect! Thanks for this.

Thanks :)

couldn't thanks you enough for this! awesome!

Pretty useful and works perfect! Thanks


Nice solution!

Thank you!

Thank you ! It works perfectly

Thanks :).

This is awesome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.