github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/video.css (about) 1 /*! 2 * # Semantic UI x.x - 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 13 /******************************* 14 Video 15 *******************************/ 16 17 .ui.video { 18 background-color: #dddddd; 19 position: relative; 20 max-width: 100%; 21 padding-bottom: 56.25%; 22 height: 0px; 23 overflow: hidden; 24 } 25 26 /*-------------- 27 Content 28 ---------------*/ 29 30 31 /* Placeholder Image */ 32 .ui.video .placeholder { 33 background-color: #333333; 34 } 35 36 /* Play Icon Overlay */ 37 .ui.video .play { 38 cursor: pointer; 39 position: absolute; 40 top: 0px; 41 left: 0px; 42 z-index: 10; 43 width: 100%; 44 height: 100%; 45 opacity: 0.8; 46 -webkit-transition: opacity 0.3s; 47 transition: opacity 0.3s; 48 } 49 .ui.video .play.icon:before { 50 position: absolute; 51 top: 50%; 52 left: 50%; 53 z-index: 11; 54 background: rgba(0, 0, 0, 0.3); 55 width: 8rem; 56 height: 8rem; 57 line-height: 8rem; 58 border-radius: 500rem; 59 color: #ffffff; 60 font-size: 8rem; 61 text-shadow: none; 62 -webkit-transform: translateX(-50%) translateY(-50%); 63 -ms-transform: translateX(-50%) translateY(-50%); 64 transform: translateX(-50%) translateY(-50%); 65 } 66 .ui.video .placeholder { 67 position: absolute; 68 top: 0px; 69 left: 0px; 70 display: block; 71 width: 100%; 72 height: 100%; 73 } 74 75 /* IFrame Embed */ 76 .ui.video .embed iframe, 77 .ui.video .embed embed, 78 .ui.video .embed object { 79 position: absolute; 80 border: none; 81 width: 100%; 82 height: 100%; 83 top: 0px; 84 left: 0px; 85 margin: 0em; 86 padding: 0em; 87 } 88 89 90 /******************************* 91 States 92 *******************************/ 93 94 95 /*-------------- 96 Hover 97 ---------------*/ 98 99 .ui.video .play:hover { 100 opacity: 1; 101 } 102 103 /*-------------- 104 Active 105 ---------------*/ 106 107 .ui.video.active .play, 108 .ui.video.active .placeholder { 109 display: none; 110 } 111 .ui.video.active .embed { 112 display: inline; 113 } 114 115 116 /******************************* 117 Video Overrides 118 *******************************/ 119 120 121 122 /******************************* 123 Site Overrides 124 *******************************/ 125