// ========================================================================== // Examples // ========================================================================== // Example players .player { margin: 0 auto @padding-base; max-width: @example-width-video; &-controls { border-radius: 0 0 @border-radius-base @border-radius-base; } } .player-audio { max-width: @example-width-audio; .player-controls { border-radius: @border-radius-base; } .player-progress { border-radius: @border-radius-base @border-radius-base 0 0; overflow: hidden; } } video, .player-video-embed { border-radius: @border-radius-base; } .player-video-embed { -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } // Style full supported player .player-video, .player-youtube, .player-vimeo { video, .player-video-embed { border-radius: @border-radius-base @border-radius-base 0 0; } &.player-fullscreen, &.fullscreen-active { max-width: none; .player-controls, video, iframe { border-radius: 0; } iframe { -webkit-mask-image: none; } } }