_flex-video.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. // Foundation by ZURB
  2. // foundation.zurb.com
  3. // Licensed under MIT Open Source
  4. @import 'global';
  5. //
  6. // @variables
  7. //
  8. $include-html-media-classes: $include-html-classes !default;
  9. // We use these to control video container padding and margins
  10. $flex-video-padding-top: rem-calc(25) !default;
  11. $flex-video-padding-bottom: 67.5% !default;
  12. $flex-video-margin-bottom: rem-calc(16) !default;
  13. // We use this to control widescreen bottom padding
  14. $flex-video-widescreen-padding-bottom: 56.34% !default;
  15. //
  16. // @mixins
  17. //
  18. @mixin flex-video-container {
  19. height: 0;
  20. margin-bottom: $flex-video-margin-bottom;
  21. overflow: hidden;
  22. padding-bottom: $flex-video-padding-bottom;
  23. padding-top: $flex-video-padding-top;
  24. position: relative;
  25. &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
  26. &.vimeo { padding-top: 0; }
  27. iframe,
  28. object,
  29. embed,
  30. video {
  31. height: 100%;
  32. position: absolute;
  33. top: 0;
  34. width: 100%;
  35. #{$default-float}: 0;
  36. }
  37. }
  38. @include exports("flex-video") {
  39. @if $include-html-media-classes {
  40. .flex-video { @include flex-video-container; }
  41. }
  42. }