Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Responsive video
Copyright (c) 2011 ZURB, http://www.zurb.com/
.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; }
}
@marclarr

While searching for ways to get this done I also found this: https://github.com/marclarr/FitVids.js

@kgb4000
kgb4000 commented May 3, 2013

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

@ricardo-vargas

Worked like a charm, thanks.

@sebheg
sebheg commented May 25, 2013

Nice! Thank you indeed!

@mikecalvo

Great stuff. Thanks!

@nostopbutton

Like it - thanks for sharing!

@drdavidpier

Perfect. Thanks!

@silkspring

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.

@alexander7567

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

@kacole2
kacole2 commented Nov 15, 2013

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!

@kryachkov

Awesome! Thanks!

@vuiermark

Worked perfectly! You are the man!

@emilchristensen

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?

@serut
serut commented Jan 2, 2014

Thanks you ! Awesome ! :)

@jayclue
jayclue commented Jan 9, 2014

Awesome! Works perfect. Thanks!

@WemGL
WemGL commented Feb 6, 2014

Perfect! Thanks for this.

@amrvignesh

Thanks :)

@firmread

couldn't thanks you enough for this! awesome!

@doubbz
doubbz commented Mar 4, 2014

Pretty useful and works perfect! Thanks

@RicardoR
RicardoR commented May 8, 2014

Thanks!

@radin-reth

Nice solution!

@thauvette

Thank you!

@canujohann

Thank you ! It works perfectly

@cesarbarone

Thanks :).

@dave-alvarez

This is awesome!

@marie20194

You nailed it! Thank you thank you!

@sanPuerquitoProgramador

Great! Thanks for sharing

@jeffcoughlin

If you're using Bootstrap 3, responsive embeds are natively supported now. The example below shows how to embed a video (from sources like youtube, vimeo, etc). For this example, you can use .embed-responsive-16by9 or .embed-responsive-4by3 (there are more options in the docs).

@citylims

simple. easy. 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.