You are here

Home » API reference » Blazy 8.2

blazy.media.css in Blazy 8.2

Same filename and directory in other branches
  1. 8 css/components/blazy.media.css
  2. 7 css/components/blazy.media.css

Provides media integration with pure CSS fluid video wrapper.

File

css/components/blazy.media.css
View source 
  1. /**

  2.  * @file

  3.  * Provides media integration with pure CSS fluid video wrapper.

  4.  */

  5. 

  6. /** Ensures not affecting iframe only without media switcher */

  7. .media--switch iframe {

  8.   opacity: 0;

  9.   visibility: hidden;

  10. }

  11. 

  12. .media__icon,

  13. .media--ratio iframe {

  14.   transition: visibility 0s linear 0.5s, opacity 0.5s linear;

  15. }

  16. 

  17. .media__icon {

  18.   cursor: pointer;

  19.   display: block;

  20.   opacity: 0;

  21.   position: absolute;

  22.   visibility: hidden;

  23.   z-index: 8;

  24. }

  25. 

  26. .media__icon--play,

  27. .media__icon--close,

  28. .media__icon--spinner {

  29.   height: 80px;

  30.   left: 50%;

  31.   top: 50%;

  32.   -ms-transform: translate(-50%, -50%);

  33.   -webkit-transform: translate(-50%, -50%);

  34.   transform: translate(-50%, -50%);

  35.   width: 80px;

  36. }

  37. 

  38. .media__icon--close::before,

  39. .media__icon--close::after,

  40. .media__icon--play::before {

  41.   content: '';

  42.   display: block;

  43.   position: absolute;

  44.   pointer-events: none;

  45. }

  46. 

  47. .media__icon--close::before,

  48. .media__icon--close::after {

  49.   background: white;

  50.   border-radius: 4px;

  51.   height: 8px;

  52.   left: 50%;

  53.   margin: -4px 0 0 -40px;

  54.   top: 50%;

  55.   width: 80px;

  56.   -ms-transform: rotate(45deg);

  57.   -webkit-transform: rotate(45deg);

  58.   transform: rotate(45deg);

  59. }

  60. 

  61. .media__icon--close::after {

  62.   -ms-transform: rotate(-45deg);

  63.   -webkit-transform: rotate(-45deg);

  64.   transform: rotate(-45deg);

  65. }

  66. 

  67. .media__icon--close:hover::before,

  68. .media__icon--close:hover::after {

  69.   background-color: #ff6d2c;

  70. }

  71. 

  72. .media__icon--play {

  73.   border: 8px solid white;

  74.   border-radius: 50%;

  75. }

  76. 

  77. .media__icon--play::before {

  78.   border: 16px solid transparent;

  79.   border-left: 24px solid white;

  80.   left: 50%;

  81.   line-height: 60px;

  82.   margin: -16px 0 0 -6px;

  83.   top: 50%;

  84. }

  85. 

  86. .media__icon--play:hover {

  87.   border-color: #ff6d2c;

  88. }

  89. 

  90. .media__icon--play:hover::before {

  91.   border-left-color: #ff6d2c;

  92. }

  93. 

  94. .is-playing:hover .media__icon {

  95.   transition-delay: 0s;

  96. }

  97. 

  98. .is-playing .media__icon--close {

  99.   visibility: hidden;

  100. }

  101. 

  102. .media__icon--play,

  103. .media:hover .media__icon--litebox,

  104. .media--switch img,

  105. .media--switch.is-playing iframe,

  106. .media--switch.is-playing:hover .media__icon--close {

  107.   opacity: 1;

  108.   visibility: visible;

  109. }

  110. 

  111. .media--switch.is-playing img,

  112. .media--switch.is-playing .media__icon--play,

  113. .media--switch.is-playing:hover .media__icon--play {

  114.   opacity: 0;

  115.   position: absolute;

  116.   visibility: hidden;

  117.   z-index: -1;

  118. }

  119. 

  120. .media--switch.is-playing iframe {

  121.   z-index: 3;

  122. }

  123. 

  124. /** @requires coder shutup, front-end complication with inline styles. */

  125. /** Prevents Twitter iframe from breaking grid, even if unholy. */

  126. .grid .twitter-tweet-rendered {

  127.   margin: 0 !important; /* csslint allow: known-properties, important */

  128.   min-width: 1px !important; /* csslint allow: known-properties, important */

  129. }

  130. 

  131. /** Fix for overflowing Facebook/ Twitter iframes. */

  132. .grid .media,

  133. .grid .fb_iframe_widget {

  134.   overflow: hidden;

  135. }

  136. 

  137. .grid .fb_iframe_widget span {

  138.   width: 100% !important; /* csslint allow: known-properties, important */

  139. }

  140. 

  141. .grid .fb_iframe_widget iframe {

  142.   position: relative !important; /* csslint allow: known-properties, important */

  143. }