Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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; }
}
@marcwiest

This comment has been minimized.

Show comment Hide comment
@marcwiest

marcwiest Feb 11, 2013

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

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

@kgb4000

This comment has been minimized.

Show comment Hide comment
@kgb4000

kgb4000 May 3, 2013

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

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

This comment has been minimized.

Show comment Hide comment
@ricardo-vargas

ricardo-vargas May 9, 2013

Worked like a charm, thanks.

Worked like a charm, thanks.

@sebheg

This comment has been minimized.

Show comment Hide comment
@sebheg

sebheg May 25, 2013

Nice! Thank you indeed!

sebheg commented May 25, 2013

Nice! Thank you indeed!

@mikecalvo

This comment has been minimized.

Show comment Hide comment
@mikecalvo

mikecalvo May 31, 2013

Great stuff. Thanks!

Great stuff. Thanks!

@nostopbutton

This comment has been minimized.

Show comment Hide comment
@nostopbutton

nostopbutton Jul 22, 2013

Like it - thanks for sharing!

Like it - thanks for sharing!

@drdavidpier

This comment has been minimized.

Show comment Hide comment
@drdavidpier

drdavidpier Aug 12, 2013

Perfect. Thanks!

Perfect. Thanks!

@silkspring

This comment has been minimized.

Show comment Hide comment
@silkspring

silkspring Sep 9, 2013

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.

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.

@jtrojan

This comment has been minimized.

Show comment Hide comment
@jtrojan

jtrojan Oct 21, 2013

@alexander7567

This comment has been minimized.

Show comment Hide comment
@alexander7567

alexander7567 Oct 30, 2013

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

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

@kacole2

This comment has been minimized.

Show comment Hide comment
@kacole2

kacole2 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!

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

This comment has been minimized.

Show comment Hide comment
@kryachkov

kryachkov Nov 30, 2013

Awesome! Thanks!

Awesome! Thanks!

@vuiermark

This comment has been minimized.

Show comment Hide comment
@vuiermark

vuiermark Dec 10, 2013

Worked perfectly! You are the man!

Worked perfectly! You are the man!

@emilchristensen

This comment has been minimized.

Show comment Hide comment
@emilchristensen

emilchristensen Dec 14, 2013

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?

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

This comment has been minimized.

Show comment Hide comment
@serut

serut Jan 2, 2014

Thanks you ! Awesome ! :)

serut commented Jan 2, 2014

Thanks you ! Awesome ! :)

@jayclue

This comment has been minimized.

Show comment Hide comment
@jayclue

jayclue Jan 9, 2014

Awesome! Works perfect. Thanks!

jayclue commented Jan 9, 2014

Awesome! Works perfect. Thanks!

@wemgl

This comment has been minimized.

Show comment Hide comment
@wemgl

wemgl Feb 6, 2014

Perfect! Thanks for this.

wemgl commented Feb 6, 2014

Perfect! Thanks for this.

@amrvignesh

This comment has been minimized.

Show comment Hide comment
@amrvignesh

amrvignesh Feb 11, 2014

Thanks :)

Thanks :)

@firmread

This comment has been minimized.

Show comment Hide comment
@firmread

firmread Feb 21, 2014

couldn't thanks you enough for this! awesome!

couldn't thanks you enough for this! awesome!

@doubbz

This comment has been minimized.

Show comment Hide comment
@doubbz

doubbz Mar 4, 2014

Pretty useful and works perfect! Thanks

doubbz commented Mar 4, 2014

Pretty useful and works perfect! Thanks

@RicardoR

This comment has been minimized.

Show comment Hide comment
@RicardoR

RicardoR May 8, 2014

Thanks!

RicardoR commented May 8, 2014

Thanks!

@radin-reth

This comment has been minimized.

Show comment Hide comment
@radin-reth

radin-reth May 9, 2014

Nice solution!

Nice solution!

@thauvette

This comment has been minimized.

Show comment Hide comment
@thauvette

thauvette Jul 25, 2014

Thank you!

Thank you!

@canujohann

This comment has been minimized.

Show comment Hide comment
@canujohann

canujohann Oct 30, 2014

Thank you ! It works perfectly

Thank you ! It works perfectly

@cesarbarone

This comment has been minimized.

Show comment Hide comment
@cesarbarone

cesarbarone Jan 15, 2015

Thanks :).

Thanks :).

@dave-alvarez

This comment has been minimized.

Show comment Hide comment
@dave-alvarez

dave-alvarez Apr 15, 2015

This is awesome!

This is awesome!

@marie20194

This comment has been minimized.

Show comment Hide comment
@marie20194

marie20194 Apr 28, 2015

You nailed it! Thank you thank you!

You nailed it! Thank you thank you!

@sanPuerquitoProgramador

This comment has been minimized.

Show comment Hide comment
@sanPuerquitoProgramador

sanPuerquitoProgramador Jun 18, 2015

Great! Thanks for sharing

Great! Thanks for sharing

@jeffcoughlin

This comment has been minimized.

Show comment Hide comment
@jeffcoughlin

jeffcoughlin Jun 28, 2015

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).

<iframe src="..." ...></iframe>

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).

<iframe src="..." ...></iframe>
@citylims

This comment has been minimized.

Show comment Hide comment
@citylims

citylims Sep 24, 2015

simple. easy. thank you!

simple. easy. thank you!

@orthodoX

This comment has been minimized.

Show comment Hide comment
@orthodoX

orthodoX May 13, 2016

Good job mate!!! Works like a charm!

Good job mate!!! Works like a charm!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment