git.roojs.org Git - roojs1/blob - scss/bootstrap/utilities/_embed.scss

   1 // Credit: Nicolas Gallagher and SUIT CSS.
   2
   3 .embed-responsive {
   4   position: relative;
   5   display: block;
   6   width: 100%;
   7   padding: 0;
   8   overflow: hidden;
   9
  10   &::before {
  11     display: block;
  12     content: "";
  13   }
  14
  15   .embed-responsive-item,
  16   iframe,
  17   embed,
  18   object,
  19   video {
  20     position: absolute;
  21     top: 0;
  22     bottom: 0;
  23     left: 0;
  24     width: 100%;
  25     height: 100%;
  26     border: 0;
  27   }
  28 }
  29
  30 @each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
  31   $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
  32   $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
  33
  34   .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
  35     &::before {
  36       padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
  37     }
  38   }
  39 }