embed.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. /*!
  2. * # Fomantic-UI - Video
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Types
  12. *******************************/
  13. .ui.embed {
  14. position: relative;
  15. max-width: 100%;
  16. height: 0;
  17. overflow: hidden;
  18. background: #DCDDDE;
  19. padding-bottom: 56.25%;
  20. }
  21. /*-----------------
  22. Embedded Content
  23. ------------------*/
  24. .ui.embed iframe,
  25. .ui.embed embed,
  26. .ui.embed object {
  27. position: absolute;
  28. border: none;
  29. width: 100%;
  30. height: 100%;
  31. top: 0;
  32. left: 0;
  33. margin: 0;
  34. padding: 0;
  35. overflow: hidden;
  36. }
  37. /*-----------------
  38. Embed
  39. ------------------*/
  40. .ui.embed > .embed {
  41. display: none;
  42. }
  43. /*--------------
  44. Placeholder
  45. ---------------*/
  46. .ui.embed > .placeholder {
  47. position: absolute;
  48. cursor: pointer;
  49. top: 0;
  50. left: 0;
  51. display: block;
  52. width: 100%;
  53. height: 100%;
  54. background-color: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
  55. }
  56. /*--------------
  57. Icon
  58. ---------------*/
  59. .ui.embed > .icon {
  60. cursor: pointer;
  61. position: absolute;
  62. top: 0;
  63. left: 0;
  64. width: 100%;
  65. height: 100%;
  66. z-index: 2;
  67. }
  68. .ui.embed > .icon:after {
  69. position: absolute;
  70. top: 0;
  71. left: 0;
  72. width: 100%;
  73. height: 100%;
  74. z-index: 3;
  75. content: '';
  76. background: -webkit-radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
  77. background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
  78. opacity: 0.5;
  79. -webkit-transition: opacity 0.5s ease;
  80. transition: opacity 0.5s ease;
  81. }
  82. .ui.embed > .icon:before {
  83. position: absolute;
  84. top: 50%;
  85. left: 50%;
  86. -webkit-transform: translateX(-50%) translateY(-50%);
  87. transform: translateX(-50%) translateY(-50%);
  88. color: #FFFFFF;
  89. font-size: 6rem;
  90. text-shadow: 0 2px 10px rgba(34, 36, 38, 0.2);
  91. -webkit-transition: opacity 0.5s ease, color 0.5s ease;
  92. transition: opacity 0.5s ease, color 0.5s ease;
  93. z-index: 10;
  94. }
  95. /*******************************
  96. States
  97. *******************************/
  98. /*--------------
  99. Hover
  100. ---------------*/
  101. .ui.embed .icon:hover:after {
  102. background: -webkit-radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
  103. background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
  104. opacity: 1;
  105. }
  106. .ui.embed .icon:hover:before {
  107. color: #FFFFFF;
  108. }
  109. /*--------------
  110. Active
  111. ---------------*/
  112. .ui.active.embed > .icon,
  113. .ui.active.embed > .placeholder {
  114. display: none;
  115. }
  116. .ui.active.embed > .embed {
  117. display: block;
  118. }
  119. /*******************************
  120. Variations
  121. *******************************/
  122. .ui.square.embed {
  123. padding-bottom: 100%;
  124. }
  125. .ui[class*="4:3"].embed {
  126. padding-bottom: 75%;
  127. }
  128. .ui[class*="16:9"].embed {
  129. padding-bottom: 56.25%;
  130. }
  131. .ui[class*="21:9"].embed {
  132. padding-bottom: 42.85714286%;
  133. }
  134. /*******************************
  135. Video Overrides
  136. *******************************/
  137. /*******************************
  138. Site Overrides
  139. *******************************/