_responsive-embed.scss 655 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. // Credit: Nicolas Gallagher and SUIT CSS.
  2. .embed-responsive {
  3. position: relative;
  4. display: block;
  5. height: 0;
  6. padding: 0;
  7. overflow: hidden;
  8. .embed-responsive-item,
  9. iframe,
  10. embed,
  11. object,
  12. video {
  13. position: absolute;
  14. top: 0;
  15. bottom: 0;
  16. left: 0;
  17. width: 100%;
  18. height: 100%;
  19. border: 0;
  20. }
  21. }
  22. // Modifier class for 21:9 aspect ratio
  23. .embed-responsive-21by9 {
  24. padding-bottom: percentage(9 / 21);
  25. }
  26. // Modifier class for 16:9 aspect ratio
  27. .embed-responsive-16by9 {
  28. padding-bottom: percentage(9 / 16);
  29. }
  30. // Modifier class for 4:3 aspect ratio
  31. .embed-responsive-4by3 {
  32. padding-bottom: percentage(3 / 4);
  33. }