/* * # Semantic - Video * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Theme
*******************************/
@type : ‘module’; @element : ‘video’;
@import ‘../../theme.config’;
/*******************************
Video
*******************************/
.ui.video {
position: relative; background-color: @background; position: relative; max-width: 100%; padding-bottom: 56.25%; height: 0px; overflow: hidden;
}
/*————–
Content
—————*/
/* Placeholder Image */ .ui.video .placeholder {
background-color: @placeholderBackground;
}
/* Play Icon Overlay */ .ui.video .play {
cursor: pointer; position: absolute; top: 0px; left: 0px; z-index: 10; width: 100%; height: 100%; opacity: @playOpacity; transition: opacity 0.3s;
} .ui.video .play.icon:before {
position: absolute; top: 50%; left: 50%; z-index: 11; background: @playBackground; width: (@playSize + @playBorderSize); height: (@playSize + @playBorderSize); line-height: (@playSize + @playBorderSize); border-radius: @playBorderRadius; color: @playColor; font-size: @playSize; text-shadow: @playShadow; transform: translateX(-50%) translateY(-50%);
}
.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 {
opacity: @playHoverOpacity;
}
/*————–
Active
—————*/
.ui.video.active .play, .ui.video.active .placeholder {
display: none;
} .ui.video.active .embed {
display: inline;
}
.loadUIOverrides();