Skip to content

Instantly share code, notes, and snippets.

@evilnapsis
Last active January 3, 2016 22:49
Show Gist options
  • Save evilnapsis/8531229 to your computer and use it in GitHub Desktop.
Save evilnapsis/8531229 to your computer and use it in GitHub Desktop.
Vídeos Adaptables en Twitter Bootstrap
<!----- Este es el codigo CSS --- -->
<style>
.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; }
}
</style>
<!----- Este es el codigo html ----->
<div class="row">
<div class="span6">
<div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>
</div>
<div class="span6">
...
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment