pablocattaneo
4/24/2015 - 8:55 PM

Videos embebidos responsives Source: http://getbootstrap.com/components/#responsive-embed

Videos embebidos responsives Source: http://getbootstrap.com/components/#responsive-embed

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