Responsive video

MIT-LICENSE.txt

Copyright (c) 2011 ZURB, http://www.zurb.com/

responsive-video.css

.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; }
}

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!

Great! Thanks for sharing

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>

simple. easy. thank you!

Good job mate!!! Works like a charm!