body.relive { .recording { .preview { @media (max-width: @screen-xs-min) { margin-bottom: @padding-large-vertical; } @media (min-width: @screen-xs-min) { float: left; margin-right: @padding-base-horizontal; } } .metadata { list-style-type: none; padding-left: 0; margin-top: 5px; @media (min-width: @screen-xs-min) { margin-left: 213px; } li { padding: 5px 0; } } } } body.relive-player { .player-wrap { padding: 0; border: 1px solid #ddd; .video-wrap { margin: 0 auto; > [data-player] { // force 16:9 aspect ratio // https://gordonlesti.com/bootstrap-responsive-embed-aspect-ratio/ padding-bottom: 56.25%; max-width: 100%; height: auto !important; } } } .well, .alert { h3 { margin-top: 0; } } }