_embed.scss 846 B

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