1
0

video.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  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. background: transparent;
  39. -webkit-transition: background 0.2s ease;
  40. transition: background 0.2s ease;
  41. }
  42. .ui.video .play.icon:before {
  43. position: absolute;
  44. top: 50%;
  45. left: 50%;
  46. z-index: 11;
  47. -webkit-transform: translateX(-50%) translateY(-50%);
  48. -ms-transform: translateX(-50%) translateY(-50%);
  49. transform: translateX(-50%) translateY(-50%);
  50. color: rgba(255, 255, 255, 0.7);
  51. font-size: 7rem;
  52. text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
  53. -webkit-transition: color 0.2s ease;
  54. transition: color 0.2s ease;
  55. }
  56. .ui.video .placeholder {
  57. position: absolute;
  58. top: 0px;
  59. left: 0px;
  60. display: block;
  61. width: 100%;
  62. height: 100%;
  63. }
  64. /* IFrame Embed */
  65. .ui.video .embed iframe,
  66. .ui.video .embed embed,
  67. .ui.video .embed object {
  68. position: absolute;
  69. border: none;
  70. width: 100%;
  71. height: 100%;
  72. top: 0px;
  73. left: 0px;
  74. margin: 0em;
  75. padding: 0em;
  76. }
  77. /*******************************
  78. States
  79. *******************************/
  80. /*--------------
  81. Hover
  82. ---------------*/
  83. .ui.video .play:hover {
  84. background: rgba(0, 0, 0, 0);
  85. }
  86. .ui.video .play:hover:before {
  87. color: #ffffff;
  88. }
  89. /*--------------
  90. Active
  91. ---------------*/
  92. .ui.active.video .play,
  93. .ui.active.video .placeholder {
  94. display: none;
  95. }
  96. .ui.active.video .embed {
  97. display: inline;
  98. }
  99. /*******************************
  100. Video Overrides
  101. *******************************/
  102. /*******************************
  103. Site Overrides
  104. *******************************/