123456789101112131415161718192021222324252627282930313233343536373839 |
- // Credit: Nicolas Gallagher and SUIT CSS.
- .embed-responsive {
- position: relative;
- display: block;
- width: 100%;
- padding: 0;
- overflow: hidden;
- &::before {
- display: block;
- content: "";
- }
- .embed-responsive-item,
- iframe,
- embed,
- object,
- video {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border: 0;
- }
- }
- @each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
- $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
- $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
- .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
- &::before {
- padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
- }
- }
- }
|