/*! * # Semantic UI 2.0.0 - Video * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Video *******************************/ .ui.video { background-color: #dddddd; position: relative; max-width: 100%; padding-bottom: 56.25%; height: 0px; overflow: hidden; } /*-------------- Content ---------------*/ /* Placeholder Image */ .ui.video .placeholder { background-color: #333333; } /* Play Icon Overlay */ .ui.video .play { cursor: pointer; position: absolute; top: 0px; left: 0px; z-index: 10; width: 100%; height: 100%; background: transparent; -webkit-transition: background 0.2s ease; transition: background 0.2s ease; } .ui.video .play.icon:before { position: absolute; top: 50%; left: 50%; z-index: 11; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: rgba(255, 255, 255, 0.7); font-size: 7rem; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15); -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .ui.video .placeholder { position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; } /* IFrame Embed */ .ui.video .embed iframe, .ui.video .embed embed, .ui.video .embed object { position: absolute; border: none; width: 100%; height: 100%; top: 0px; left: 0px; margin: 0em; padding: 0em; } /******************************* States *******************************/ /*-------------- Hover ---------------*/ .ui.video .play:hover { background: rgba(0, 0, 0, 0); } .ui.video .play:hover:before { color: #ffffff; } /*-------------- Active ---------------*/ .ui.active.video .play, .ui.active.video .placeholder { display: none; } .ui.active.video .embed { display: inline; } /******************************* Video Overrides *******************************/ /******************************* Site Overrides *******************************/