Skip to content

Instantly share code, notes, and snippets.

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

Copy link

marcwiest commented Feb 11, 2013

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

@kgb4000

This comment has been minimized.

Copy link

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.

Copy link

ricardo-vargas commented May 9, 2013

Worked like a charm, thanks.

@sebheg

This comment has been minimized.

Copy link

sebheg commented May 25, 2013

Nice! Thank you indeed!

@mikecalvo

This comment has been minimized.

Copy link

mikecalvo commented May 31, 2013

Great stuff. Thanks!

@nostopbutton

This comment has been minimized.

Copy link

nostopbutton commented Jul 22, 2013

Like it - thanks for sharing!

@drdavidpier

This comment has been minimized.

Copy link

drdavidpier commented Aug 12, 2013

Perfect. Thanks!

@silkspring

This comment has been minimized.

Copy link

silkspring commented 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.

@jtrojan

This comment has been minimized.

Copy link

jtrojan commented Oct 21, 2013

@alexander7567

This comment has been minimized.

Copy link

alexander7567 commented Oct 30, 2013

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

@kacole2

This comment has been minimized.

Copy link

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.

Copy link

kryachkov commented Nov 30, 2013

Awesome! Thanks!

@vuiermark

This comment has been minimized.

Copy link

vuiermark commented Dec 10, 2013

Worked perfectly! You are the man!

@emilchristensen

This comment has been minimized.

Copy link

emilchristensen commented 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?

@serut

This comment has been minimized.

Copy link

serut commented Jan 2, 2014

Thanks you ! Awesome ! :)

@jayclue

This comment has been minimized.

Copy link

jayclue commented Jan 9, 2014

Awesome! Works perfect. Thanks!

@wemgl

This comment has been minimized.

Copy link

wemgl commented Feb 6, 2014

Perfect! Thanks for this.

@amrvignesh

This comment has been minimized.

Copy link

amrvignesh commented Feb 11, 2014

Thanks :)

@firmread

This comment has been minimized.

Copy link

firmread commented Feb 21, 2014

couldn't thanks you enough for this! awesome!

@doubbz

This comment has been minimized.

Copy link

doubbz commented Mar 4, 2014

Pretty useful and works perfect! Thanks

@RicardoR

This comment has been minimized.

Copy link

RicardoR commented May 8, 2014

Thanks!

@radinreth

This comment has been minimized.

Copy link

radinreth commented May 9, 2014

Nice solution!

@thauvette

This comment has been minimized.

Copy link

thauvette commented Jul 25, 2014

Thank you!

@canujohann

This comment has been minimized.

Copy link

canujohann commented Oct 30, 2014

Thank you ! It works perfectly

@cesarbarone

This comment has been minimized.

Copy link

cesarbarone commented Jan 15, 2015

Thanks :).

@dave-alvarez

This comment has been minimized.

Copy link

dave-alvarez commented Apr 15, 2015

This is awesome!

@marie20194

This comment has been minimized.

Copy link

marie20194 commented Apr 28, 2015

You nailed it! Thank you thank you!

@sanPuerquitoProgramador

This comment has been minimized.

Copy link

sanPuerquitoProgramador commented Jun 18, 2015

Great! Thanks for sharing

@jeffcoughlin

This comment has been minimized.

Copy link

jeffcoughlin commented 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>
@citylims

This comment has been minimized.

Copy link

citylims commented Sep 24, 2015

simple. easy. thank you!

@orthodoX

This comment has been minimized.

Copy link

orthodoX commented May 13, 2016

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
You can’t perform that action at this time.