Skip to content

Instantly share code, notes, and snippets.

@jgarber
Created April 4, 2012 14:57
Show Gist options
  • Save jgarber/2302238 to your computer and use it in GitHub Desktop.
Save jgarber/2302238 to your computer and use it in GitHub Desktop.
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; }
}
@amrvignesh
Copy link

Thanks :)

@firmread
Copy link

couldn't thanks you enough for this! awesome!

@doubbz
Copy link

doubbz commented Mar 4, 2014

Pretty useful and works perfect! Thanks

@RicardoR
Copy link

RicardoR commented May 8, 2014

Thanks!

@radinreth
Copy link

Nice solution!

@thauvette
Copy link

Thank you!

@canujohann
Copy link

Thank you ! It works perfectly

@cesarbarone
Copy link

Thanks :).

@dave-alvarez
Copy link

This is awesome!

@marie20194
Copy link

You nailed it! Thank you thank you!

@sanPuerquitoProgramador

Great! Thanks for sharing

@jeffcoughlin
Copy link

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
Copy link

simple. easy. thank you!

@orthodoX
Copy link

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