Skip to content

Instantly share code, notes, and snippets.

@pablocattaneo
Last active August 3, 2018 11:30
Show Gist options
  • Save pablocattaneo/42235e46db1fc341570a to your computer and use it in GitHub Desktop.
Save pablocattaneo/42235e46db1fc341570a to your computer and use it in GitHub Desktop.
Videos embebidos responsives Source: http://getbootstrap.com/components/#responsive-embed
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%; /* This number is the result of 100/56.25 = 1,777777777777778 it mean the aspect radio 16:9 = 1,777777777777778*/
}
.embed-responsive-4by3 {
padding-bottom: 75%;
}
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
.embed-responsive
position relative
display block
height 0
padding 0
overflow hidden
.embed-responsive-item
iframe
embed
object
video
position absolute
top 0
bottom 0
left 0
width 100%
height 100%
border 0
.embed-responsive-16by9
padding-bottom 56.25% /* This number is the result of 100/56.25 = 1,777777777777778 it mean the aspect radio 16:9 = 1,777777777777778*/
.embed-responsive-4by3
padding-bottom 75%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment