You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

125 lines
2.1 KiB

9 years ago
9 years ago
9 years ago
10 years ago
  1. /*!
  2. * # Semantic UI 2.0.0 - Video
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Video
  13. *******************************/
  14. .ui.video {
  15. background-color: #dddddd;
  16. position: relative;
  17. max-width: 100%;
  18. padding-bottom: 56.25%;
  19. height: 0px;
  20. overflow: hidden;
  21. }
  22. /*--------------
  23. Content
  24. ---------------*/
  25. /* Placeholder Image */
  26. .ui.video .placeholder {
  27. background-color: #333333;
  28. }
  29. /* Play Icon Overlay */
  30. .ui.video .play {
  31. cursor: pointer;
  32. position: absolute;
  33. top: 0px;
  34. left: 0px;
  35. z-index: 10;
  36. width: 100%;
  37. height: 100%;
  38. opacity: 0.8;
  39. -webkit-transition: opacity 0.3s;
  40. transition: opacity 0.3s;
  41. }
  42. .ui.video .play.icon:before {
  43. position: absolute;
  44. top: 50%;
  45. left: 50%;
  46. z-index: 11;
  47. background: rgba(0, 0, 0, 0.3);
  48. width: 8rem;
  49. height: 8rem;
  50. line-height: 8rem;
  51. border-radius: 500rem;
  52. color: #ffffff;
  53. font-size: 8rem;
  54. text-shadow: none;
  55. -webkit-transform: translateX(-50%) translateY(-50%);
  56. -ms-transform: translateX(-50%) translateY(-50%);
  57. transform: translateX(-50%) translateY(-50%);
  58. }
  59. .ui.video .placeholder {
  60. position: absolute;
  61. top: 0px;
  62. left: 0px;
  63. display: block;
  64. width: 100%;
  65. height: 100%;
  66. }
  67. /* IFrame Embed */
  68. .ui.video .embed iframe,
  69. .ui.video .embed embed,
  70. .ui.video .embed object {
  71. position: absolute;
  72. border: none;
  73. width: 100%;
  74. height: 100%;
  75. top: 0px;
  76. left: 0px;
  77. margin: 0em;
  78. padding: 0em;
  79. }
  80. /*******************************
  81. States
  82. *******************************/
  83. /*--------------
  84. Hover
  85. ---------------*/
  86. .ui.video .play:hover {
  87. opacity: 1;
  88. }
  89. /*--------------
  90. Active
  91. ---------------*/
  92. .ui.video.active .play,
  93. .ui.video.active .placeholder {
  94. display: none;
  95. }
  96. .ui.video.active .embed {
  97. display: inline;
  98. }
  99. /*******************************
  100. Video Overrides
  101. *******************************/
  102. /*******************************
  103. Site Overrides
  104. *******************************/