Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Responsive video

View MIT-LICENSE.txt
1
Copyright (c) 2011 ZURB, http://www.zurb.com/
View MIT-LICENSE.txt
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: https://github.com/marclarr/FitVids.js

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!

Hi,

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?

Regards.

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

Thanks!

Nice solution!

Thank you!

Thank you ! It works perfectly

Thanks :).

This is awesome!

You nailed it! Thank you thank you!

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.