openplayer.css

/* === General =================== */
.op-player {
    background: #000;
    font-family: sans-serif;
    line-height: 1.15;
    min-height: 30px;
    position: relative;
    -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
}
.op-player__video {
    overflow: hidden;
}
.op-player,
.op-player *,
.op-player :after,
.op-player :before {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.op-player__media {
    display: inline-block;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    position: relative;
    width: 100% !important;
}
.op-player [aria-hidden='true'] {
    display: none;
}
.op-player__audio {
    background: #000;
}
.op-player .media-controls.mac.fullscreen > .controls-bar {
    display: none;
}
.op-sr {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}
.op-player__loader {
    -webkit-animation: spin 1s infinite linear;
            animation: spin 1s infinite linear;
    border: 5px solid #fff;
    border-radius: 50%;
    border-top: 5px solid #f00;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
    }
}
/* === Controls =================== */
.op-controls {
    background: #000000;
    background: rgba(0, 0, 0, .2);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    bottom: 0;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 0.85em;
    padding: 0 4px;
    pointer-events: all;
    position: absolute;
    -webkit-transition: bottom 0.3s ease;
    -o-transition: bottom 0.3s ease;
    transition: bottom 0.3s ease;
    width: 100%;
    z-index: 3;
}
.op-controls--hidden .op-controls {
    bottom: -36px;
    pointer-events: none;
}
.op-player__video .op-controls {
    margin-top: 5px;
    padding-top: 11px;
}
.op-controls * {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    pointer-events: all;
}
.op-player__play,
.op-settings__back,
.op-controls button {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    overflow: visible;
    position: relative;
    text-transform: none;
}
.op-controls button {
    padding: 2px 4px 3px;
    z-index: 4;
}
.op-controls button > span {
    color: #fff;
}
.op-player__loader {
    display: block;
    height: 60px;
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
    position: absolute;
    top: calc(50% - 20px);
    width: 60px;
    z-index: 2;
}
.op-player__play {
    background: transparent;
    border: 0;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 26px 0 26px 46px;
    cursor: pointer;
    display: block;
    height: 52px;
    left: 50%;
    margin-left: -18px;
    margin-top: -23px;
    padding: 0;
    position: absolute;
    top: calc(50% - 23px);
    -webkit-transition: 100ms all ease;
    -o-transition: 100ms all ease;
    transition: 100ms all ease;
    width: 0;
    will-change: border-width;
    z-index: 2;
}
.op-player__play > span {
    border: 0;
    clip: rect(0, 0, 0, 0);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.op-player__play--paused {
    border-style: double;
    border-width: 0 0 0 46px;
}
.op-player__play:hover {
    border-color: transparent transparent transparent #f00;
}
.op-controls--hidden .op-player__loader,
.op-controls--hidden .op-player__play {
    top: 50%;
}
.op-controls--hidden .op-player__play {
    margin-top: -26px;
}
.op-player__play::-moz-focus-inner,
.op-settings__back,
.op-controls button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
.op-player__play:-moz-focusing,
.op-settings__back,
.op-controls button:-moz-focusing {
    outline: 1px dotted ButtonText;
}
.op-controls button:before {
    color: #fff;
    display: inline-block;
    height: 15px;
    margin-left: 0.2em;
    margin-right: 0.2em;
    text-align: center;
    width: 15px;
}
.op-controls .op-control__right {
    margin-left: auto;
}
.op-controls .op-control__right ~ .op-control__right {
    margin-left: 0;
}
.op-controls button:hover {
    opacity: 0.5;
}
.op-controls .op-control--no-hover:hover {
    opacity: 1;
}
.op-controls input[type='range'],
.op-controls button {
    -ms-touch-action: manipulation;
        touch-action: manipulation;
}

/* === Time =================== */
.op-controls .op-controls-time {
    margin: 4px 3px 0;
}

/* === Buttons =================== */
.op-controls__playpause:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNSAzNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzUgMzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTMxLjEsMTYuMmMwLjcsMC4zLDEsMSwwLjcsMS43Yy0wLjEsMC4zLTAuNCwwLjYtMC43LDAuN0w1LDM0LjdjLTEuMSwwLjctMiwwLjItMi0xLjFWMS40YzAtMS4zLDEtMS44LDItMS4xCglMMzEuMSwxNi4yeiIvPgo8L3N2Zz4K);
}
.op-controls__playpause--pause:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNSAzNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzUgMzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQuNywwaDQuOGMxLjIsMCwyLjIsMSwyLjIsMi4ydjMwLjZjMCwxLjItMSwyLjItMi4yLDIuMkg0LjdjLTEuMiwwLTIuMi0xLTIuMi0yLjJWMi4yQzIuNSwxLDMuNSwwLDQuNywweiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjYuMiwwSDMxYzEuMiwwLDIuMiwxLDIuMiwyLjJ2MzAuNmMwLDEuMi0xLDIuMi0yLjIsMi4yaC00LjhDMjUsMzUsMjQsMzQsMjQsMzIuOFYyLjJDMjQsMSwyNSwwLDI2LjIsMHoiLz4KPC9zdmc+Cg==);
}
.op-controls__playpause--replay:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNSAzNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzUgMzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTI2LjYsOS40YzQuMiw1LjMsMy4zLDEyLjktMiwxNy4xcy0xMi45LDMuMy0xNy4xLTJDMy44LDE5LjksNCwxMy4zLDgsOC45TDQuNiw1LjRjLTYuNCw2LjktNiwxNy42LDAuOSwyNAoJczE3LjYsNiwyNC0wLjljNS45LTYuMyw2LjEtMTYsMC41LTIyLjZMMjYuNiw5LjR6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMC40LDIuOGMtMC4yLTAuOCwwLjMtMS42LDEuMS0xLjhjMC4yLTAuMSwwLjUtMC4xLDAuNywwbDExLjgsMS42YzEuMiwwLjIsMS40LDEsMC42LDEuOEwyMy45LDE1LjEKCWMtMC44LDAuOC0xLjYsMC42LTEuOC0wLjZMMjAuNCwyLjh6Ii8+Cjwvc3ZnPgo=);
}
.op-controls__fullscreen:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNSAzNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzUgMzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO30KCS5zdDF7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGcgaWQ9Ikljb25zIj4KCTxwb2x5Z29uIGlkPSJQYXRoIiBjbGFzcz0ic3QwIiBwb2ludHM9IjAsMCAzNSwwIDM1LDM1IDAsMzUgCSIvPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTEwLjIsMjAuNEg3LjN2Ny4zaDcuM3YtMi45aC00LjRWMjAuNHogTTcuMywxNC42aDIuOXYtNC40aDQuNFY3LjNINy4zVjE0LjZ6IE0yNC44LDI0LjhoLTQuNHYyLjloNy4zdi03LjMKCQloLTIuOVYyNC44eiBNMjAuNCw3LjN2Mi45aDQuNHY0LjRoMi45VjcuM0gyMC40eiIvPgo8L2c+Cjwvc3ZnPgo=);
    width: 20px !important;
}
.op-controls__fullscreen--out:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNSAzNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzUgMzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO30KCS5zdDF7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIwLDAgMzUsMCAzNSwzNSAwLDM1ICIvPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNy4zLDIzLjNoNC40djQuNGgyLjl2LTcuM0g3LjNWMjMuM3ogTTExLjcsMTEuN0g3LjN2Mi45aDcuM1Y3LjNoLTIuOVYxMS43eiBNMjAuNCwyNy43aDIuOXYtNC4zaDQuNHYtMi45CgloLTcuM1YyNy43eiBNMjMuMywxMS43VjcuM2gtMi45djcuM2g3LjN2LTIuOUgyMy4zeiIvPgo8L3N2Zz4K);
    width: 20px !important;
}
.op-controls__mute:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNSAzNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzUgMzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTI3LjgsMjguN2MtMC42LDAtMS4yLTAuMy0xLjUtMC45Yy0wLjUtMC44LTAuMi0xLjksMC42LTIuNGM0LjQtMi42LDUuOS04LjIsMy40LTEyLjZjLTAuOC0xLjQtMi0yLjYtMy40LTMuNAoJQzI2LDkuMSwyNS42LDgsMjYsNy4xczEuNC0xLjMsMi4zLTAuOGMwLjEsMCwwLjIsMC4xLDAuMywwLjJjNi4xLDMuNiw4LjEsMTEuNCw0LjUsMTcuNWMtMS4xLDEuOS0yLjcsMy40LTQuNSw0LjUKCUMyOC40LDI4LjcsMjguMSwyOC43LDI3LjgsMjguN3oiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTI0LjUsMjMuMWMtMC42LDAtMS4yLTAuMy0xLjUtMC45Yy0wLjUtMC44LTAuMi0xLjksMC42LTIuNGMxLjMtMC43LDEuNy0yLjMsMS0zLjZjLTAuMi0wLjQtMC42LTAuOC0xLTEKCWMtMC44LTAuNi0xLTEuNy0wLjQtMi40YzAuNS0wLjcsMS40LTAuOSwyLjItMC42YzIuOSwxLjcsMy45LDUuNCwyLjMsOC4zYy0wLjUsMC45LTEuMywxLjctMi4zLDIuM0MyNS4xLDIzLDI0LjgsMjMuMSwyNC41LDIzLjF6IgoJLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE3LjgsNC4xbC04LjEsNi40bC0wLjIsMC4ySDFjLTAuNiwwLTEsMC40LTEsMXYxMS42YzAsMC42LDAuNCwxLDEsMWg4LjVsMC4xLDAuMmw4LjEsNi41CgljMC40LDAuMywxLjEsMC4zLDEuNC0wLjJjMC4xLTAuMiwwLjItMC40LDAuMi0wLjZWNC45YzAtMC42LTAuNS0xLTEtMUMxOC4xLDQsMTcuOSw0LDE3LjgsNC4xeiIvPgo8L3N2Zz4K);
    width: 20px !important;
}
.op-controls__mute--half:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNSAzNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzUgMzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTMwLjEsMjQuM2MtMC44LDAtMS41LTAuNC0xLjktMS4xYy0wLjYtMS0wLjItMi4zLDAuOC0zYzEuNi0wLjksMi4xLTIuOCwxLjMtNC40Yy0wLjMtMC41LTAuNy0xLTEuMy0xLjMKCWMtMS0wLjYtMS4zLTItMC43LTNjMC42LTEsMS45LTEuMywyLjktMC43YzMuNiwyLjEsNC45LDYuNywyLjgsMTAuM2MtMC43LDEuMi0xLjYsMi4xLTIuOCwyLjhDMzAuOSwyNC4yLDMwLjUsMjQuMywzMC4xLDI0LjN6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMS45LDFMMTIsOC45TDExLjgsOUgxLjJDMC41LDksMCw5LjYsMCwxMC4zYzAsMCwwLDAsMCwwdjE0LjNjMCwwLjcsMC41LDEuMiwxLjIsMS4yaDEwLjVsMC4yLDAuMmw5LjksNy45CgljMC41LDAuNCwxLjMsMC40LDEuNy0wLjJjMC4yLTAuMiwwLjMtMC41LDAuMy0wLjhWMmMwLjEtMC42LTAuNC0xLjItMS0xLjNDMjIuNSwwLjcsMjIuMSwwLjgsMjEuOSwxeiIvPgo8L3N2Zz4K);
    width: 18px !important;
}
.op-controls__mute--muted:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNSAzNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzUgMzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTI4LDAuMkwxNy42LDguNWwtMC4yLDAuMmgtMTFDNS43LDguNiw1LjEsOS4xLDUsOS44YzAsMCwwLDAuMSwwLDAuMXYxNC45YzAsMC43LDAuNiwxLjMsMS4zLDEuM2MwLDAsMCwwLDAsMAoJaDExbDAuMiwwLjJsMTAuNCw4LjNjMC42LDAuNCwxLjQsMC40LDEuOC0wLjJjMC4yLTAuMiwwLjMtMC41LDAuMy0wLjhWMS4yYzAtMC43LTAuNS0xLjItMS4yLTEuMkMyOC41LDAsMjguMiwwLjEsMjgsMC4yeiIvPgo8L3N2Zz4K);
    width: 18px !important;
}
.op-controls__captions:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNSAzNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzUgMzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsNC40djI2LjJoMzVWNC40SDB6IE0zMC40LDI1LjRjLTAuMiwwLjMtMC42LDAuNS0wLjksMC43Yy0xLjEsMC44LTYuMSwxLjEtMTEuOSwxLjFTNi42LDI2LjksNS41LDI2LjEKCWMtMC4zLTAuMi0wLjctMC40LTAuOS0wLjdjLTEuMS0xLjQtMS4yLTMuNC0xLjMtOHMwLjItNi42LDEuMy04YzAuMy0wLjMsMC42LTAuNSwwLjktMC43YzEtMC44LDYuMy0xLjEsMTIuMS0xLjFzMTAuOCwwLjMsMTEuOSwxLjEKCWMwLjMsMC4yLDAuNiwwLjQsMC45LDAuN2MxLjEsMS40LDEuMywzLjQsMS4zLDhTMzEuNSwyNCwzMC40LDI1LjR6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNi45LDE2LjJjLTAuMy0zLjYtMi4yLTUuNy01LjYtNS43Yy0zLjEsMC01LjYsMi44LTUuNiw3LjNzMi4yLDcuNCw1LjksNy40YzMsMCw1LTIuMiw1LjMtNS44aC0zLjUKCWMtMC4xLDEuMy0wLjcsMi40LTEuOSwyLjRjLTEuOSwwLTIuMi0xLjgtMi4yLTMuOGMwLTIuNywwLjgtNC4xLDIuMS00LjFjMS4xLDAsMS45LDAuOCwyLDIuM0gxNi45eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjksMTYuMmMtMC4zLTMuNi0yLjItNS43LTUuNi01LjdjLTMuMSwwLTUuNiwyLjgtNS42LDcuM3MyLjIsNy40LDUuOSw3LjRjMywwLDUtMi4yLDUuMy01LjhoLTMuNQoJYy0wLjEsMS4zLTAuNywyLjQtMS45LDIuNGMtMS45LDAtMi4yLTEuOC0yLjItMy44YzAtMi43LDAuOC00LjEsMi4xLTQuMXMxLjksMC44LDIsMi4zSDI5eiIvPgo8L3N2Zz4K);
    width: 20px !important;
}
.op-controls__settings:before {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNSAzNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzUgMzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTMwLjUsMTkuMmMwLjEtMC42LDAuMS0xLjIsMC4xLTEuN2MwLTAuNi0wLjEtMS4yLTAuMS0xLjdsMy43LTIuOWMwLjMtMC4zLDAuNC0wLjgsMC4yLTEuMWwtMy41LTYuMQoJYy0wLjItMC40LTAuNy0wLjUtMS4xLTAuNGwtNC40LDEuN2MtMC45LTAuNy0xLjktMS4zLTIuOS0xLjdsLTAuNy00LjZDMjEuOCwwLjMsMjEuNSwwLDIxLDBoLTdjLTAuNCwwLTAuOCwwLjMtMC44LDAuN2wtMC43LDQuNgoJYy0xLjEsMC40LTIuMSwxLTMsMS43TDUuMiw1LjNjLTAuNC0wLjItMC45LDAtMS4xLDAuNGwtMy41LDYuMWMtMC4yLDAuNC0wLjEsMC45LDAuMiwxLjFsMy43LDIuOWMtMC4xLDAuNi0wLjEsMS4yLTAuMSwxLjcKCWMwLDAuNiwwLjEsMS4yLDAuMSwxLjdsLTMuNywyLjljLTAuMywwLjMtMC40LDAuOC0wLjIsMS4xbDMuNSw2LjFjMC4yLDAuNCwwLjcsMC41LDEuMSwwLjRsNC40LTEuN2MwLjksMC43LDEuOSwxLjMsMi45LDEuNwoJbDAuNyw0LjZjMC4xLDAuNCwwLjQsMC43LDAuOSwwLjdoN2MwLjQsMCwwLjgtMC4zLDAuOC0wLjdsMC43LTQuNmMxLjEtMC40LDItMSwyLjktMS43bDQuNCwxLjdjMC40LDAuMiwwLjksMCwxLjEtMC40bDMuNS02LjEKCWMwLjItMC40LDAuMS0wLjktMC4yLTEuMUwzMC41LDE5LjJ6IE0xNy41LDIzLjZjLTMuNCwwLTYuMS0yLjctNi4xLTYuMWMwLTMuNCwyLjctNi4xLDYuMS02LjFjMy40LDAsNi4xLDIuNyw2LjEsNi4xCglDMjMuNiwyMC45LDIwLjgsMjMuNiwxNy41LDIzLjZMMTcuNSwyMy42eiIvPgo8L3N2Zz4K);
}

/* === Settings =================== */
.op-settings {
    background: #1c1c1c;
    background: rgba(28, 28, 28, .9);
    bottom: 48px;
    color: #fff;
    font-size: 0.85em;
    overflow: hidden;
    position: absolute;
    right: 5px;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
    -webkit-transition: right 0.2s ease;
    -o-transition: right 0.2s ease;
    transition: right 0.2s ease;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    will-change: width,height;
    z-index: 4;
}
.op-player__audio .op-settings {
    bottom: 32px;
    right: 0;
}
.op-settings--sliding {
    right: -999px;
}
.op-settings__menu {
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
}
.op-settings__menu-item,
.op-settings__submenu-item {
    display: table-row;
    outline: none;
    padding: 0;
}
.op-settings__menu-label,
.op-settings__submenu-label {
    display: table-cell;
    padding: 5px 15px;
    vertical-align: middle;
}
.op-settings__submenu-item,
.op-settings__submenu-label {
    display: block;
}
.op-settings__submenu-item {
    cursor: pointer;
}
.op-settings__submenu-item[aria-checked='true'] .op-settings__submenu-label {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxMDAlIj48cGF0aCBkPSJNOSAxNi4yTDQuOCAxMmwtMS40IDEuNEw5IDE5IDIxIDdsLTEuNC0xLjRMOSAxNi4yeiIgZmlsbD0iI2ZmZiIgLz48L3N2Zz4=');
    background-position: left 4px center;
    background-repeat: no-repeat;
    background-size: 18px;
    padding: 8px 15px 8px 25px;
}
.op-settings__menu-content {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIxMDAlIj48cGF0aCBkPSJtIDEyLjU5LDIwLjM0IDQuNTgsLTQuNTkgLTQuNTgsLTQuNTkgMS40MSwtMS40MSA2LDYgLTYsNiB6IiBmaWxsPSIjZmZmIiAvPjwvc3ZnPg==');
    background-position: right 0 center;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    cursor: pointer;
    display: table-cell;
    padding: 0 15px;
    padding-right: 38px;
    vertical-align: middle;
}
.op-settings__header {
    padding: 5px;
}
.op-settings__back {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIxMDAlIj48cGF0aCBkPSJNIDE5LjQxLDIwLjA5IDE0LjgzLDE1LjUgMTkuNDEsMTAuOTEgMTgsOS41IGwgLTYsNiA2LDYgeiIgZmlsbD0iI2ZmZiIgLz48L3N2Zz4=');
    background-position: left 0 center;
    background-repeat: no-repeat;
    background-size: 20px 32px;
    color: inherit;
    height: 100%;
    padding: 0 10px 0 20px;
}

/* === Progress / Volume =================== */
.op-controls input[type='range'],
.op-controls progress {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: 0;
    height: 5px;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    width: 100%;
}
.op-controls input[type='range'] {
    background: transparent;
    height: 0;
    padding: 2.5px 0;
    -webkit-tap-highlight-color: transparent;
    z-index: 3;
}
.op-controls input[type='range']:focus,
.op-controls progress {
    outline: none;
}
.op-controls input[type='range']::-moz-focus-outer {
    border: 0;
}
.op-controls input[type='range']::-webkit-slider-runnable-track {
    background: 0 0;
    border: 0;
    cursor: pointer;
    height: 8px;
    -webkit-user-select: none;
            user-select: none;
}
.op-controls input[type='range']::-moz-range-track {
    background: 0 0;
    border: 0;
    cursor: pointer;
    height: 8px;
    -moz-user-select: none;
         user-select: none;
}
.op-controls input[type='range']::-ms-track {
    background: 0 0;
    border: 0;
    cursor: pointer;
    height: 8px;
    -ms-user-select: none;
        user-select: none;
}
.op-controls input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 12px;
    margin-top: -2px;
    position: relative;
    width: 12px;
}
.op-controls input[type='range']::-moz-range-thumb {
    -moz-appearance: none;
         appearance: none;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 12px;
    margin-top: -2px;
    position: relative;
    width: 12px;
}
.op-controls input[type='range']::-ms-thumb {
    appearance: none;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 12px;
    margin-top: -2px;
    position: relative;
    width: 12px;
}
.op-controls input[type='range']::-ms-tooltip {
    display: none;
}
.op-controls input[type='range']::-ms-fill-lower,
.op-controls input[type='range']::-ms-fill-upper {
    background: transparent;
}
.op-controls input[type='range']::-ms-ticks-before,
.op-controls input[type='range']::-ms-ticks-after {
    display: none !important;
}
.op-controls--hidden .op-controls .op-controls__progress--seek::-webkit-slider-thumb {
    background: transparent;
}
.op-controls--hidden .op-controls .op-controls__progress--seek::-moz-range-thumb {
    background: transparent;
}
.op-controls--hidden .op-controls .op-controls__progress--seek::-ms-thumb {
    background: transparent;
}
.op-controls progress {
    display: inline-block;
    vertical-align: baseline;
}
.op-controls progress::-webkit-progress-bar {
    background: 0 0;
}
.op-controls progress::-moz-progress-bar {
    background: 0 0;
}
.op-controls .op-controls__progress {
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
}
.op-controls .op-controls__progress,
.op-controls .op-controls__progress:hover,
.op-controls .op-controls__volume,
.op-controls .op-controls__volume:hover {
    cursor: pointer;
}
.op-controls__progress,
.op-controls__volume {
    display: inline-block;
    height: 5px;
    margin-left: 10px;
    margin-top: 9px;
    pointer-events: all;
    position: relative;
}
.op-player__video .op-controls__progress {
    bottom: 34px;
    left: 8px;
    margin-left: -8px;
    position: absolute;
    width: 100%;
}
.op-controls progress::-webkit-progress-value {
    background: currentColor;
}
.op-controls progress::-moz-progress-bar {
    background: currentColor;
}
.op-controls__progress--buffer::-webkit-progress-value {
    -webkit-transition: width 0.2s ease;
    -o-transition: width 0.2s ease;
    transition: width 0.2s ease;
}
.op-controls__progress--played::-webkit-progress-value,
.op-controls__volume--display::-webkit-progress-value {
    max-width: 99%;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}
.op-player__video .op-controls__progress--played::-webkit-progress-value {
    max-width: 100%;
}
.op-controls__progress--buffer::-moz-progress-bar {
    -webkit-transition: width 0.2s ease;
    -o-transition: width 0.2s ease;
    transition: width 0.2s ease;
}
.op-controls__progress--played::-moz-progress-bar,
.op-controls__volume--display::-moz-progress-bar {
    max-width: 99%;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}
.op-controls .op-controls__progress--played,
.op-controls .op-controls__volume--display {
    background: 0 0;
    color: #f00;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: 2;
}
.op-controls .op-controls__volume--display {
    background: #ffffff;
    background: rgba(255, 255, 255, .35);
}
.op-controls .op-controls__progress--buffer {
    background: #ffffff;
    background: rgba(255, 255, 255, .3);
    color: #ffffff;
    color: rgba(255, 255, 255, .25);
}
.op-ads--active .op-controls .op-controls__progress--seek {
    pointer-events: none;
}
.op-ads--active .op-controls .op-controls__progress--played {
    color:#fecb2f;
}
.op-ads--active .op-controls .op-controls__progress--buffer {
    color: transparent;
}
.op-ads--active .op-controls .op-controls__progress--seek::-webkit-slider-thumb {
    display: none;
}
.op-ads--active .op-controls .op-controls__progress--seek::-moz-range-thumb {
    display: none;
}
.op-ads--active .op-controls .op-controls__progress--seek::-ms-thumb {
    display: none;
}
.op-ads--active .op-controls .op-controls__progress--seek::-webkit-slider-runnable-track {
    cursor: default;
}
.op-ads--active .op-controls .op-controls__progress--seek::-moz-range-track {
    cursor: default;
}
.op-ads--active .op-controls .op-controls__progress--seek::-ms-track {
    cursor: default;
}
.op-ads--active .op-controls .op-control__hide-in-ad {
    cursor: default;
    display: none;
    pointer-events: none;
}

/* === Tooltip ================== */
.op-controls__tooltip {
    background: #eee;
    border: 1px solid #000;
    bottom: 100%;
    color: #000;
    display: none;
    left: 0;
    margin-bottom: 10px;
    padding: 1px 4px;
    position: absolute;
    text-align: center;
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
}
.op-player__video .op-controls__tooltip {
    margin-bottom: 10px;
}
.op-controls__tooltip:before,
.op-controls__tooltip:after {
    content:'';
    height: 0;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 100%;
    width: 0;
}
.op-controls__tooltip:before {
    border-left: solid 8px transparent;
    border-right: solid 8px transparent;
    border-top: solid 8px #000;
}
.op-controls__tooltip:after {
    border-left: solid 7px transparent;
    border-right: solid 7px transparent;
    border-top: solid 7px #eee;
}
.op-controls__tooltip--visible {
    display: block;
}

/* === Volume =================== */
.op-controls__volume {
    margin-left: 0;
    width: 70px;
}
.op-controls .op-controls__mute:before {
    text-align: left;
}
.op-player__video .op-controls__volume {
    margin-top: 10px;
}
.op-player__unmute {
    background: #000000;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    cursor: pointer;
    left: 0;
    padding: 5px;
    position: absolute;
    top: 0;
    z-index: 3;
}

/* == Fullscreen ============= */
.op-player[data-fullscreen='true'] .op-controls {
    z-index: 2147483648;
}
.op-player[data-fullscreen='true'].op-controls--hidden {
    cursor: none;
}
.op-player[data-fullscreen='true'].op-controls--hidden .op-controls {
    bottom: -40px;
}
.op-player video::-webkit-media-controls,
.op-player video::-webkit-media-text-track-container {
    display: none !important;
}

/* == Captions =============== */
.op-captions {
    bottom: 0;
    color: #fff;
    display: none;
    font-weight: 400;
    left: 0;
    padding: 20px 0;
    position: absolute;
    text-align: center;
    -webkit-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
            transform: translateY(-40px);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    width: 100%;
    z-index: 1;
}
.op-controls--hidden .op-captions {
    bottom: -32px;
}
.op-captions--on {
    display: block;
}
.op-captions > span {
    background: #000000;
    background: rgba(0, 0, 0, .7);
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    line-height: 150%;
    padding: 3px 10px;
}
.op-player__audio.op-captions--detected {
    background: transparent;
    min-height: 95px;
}
.op-player__audio.op-captions--detected .op-captions {
    bottom: -10px;
    padding: 0;
}
.op-player__audio.op-captions--detected .op-captions > span {
    background: transparent;
    color: #000;
}
.op-player__audio.op-captions--detected .op-controls {
    background: #000;
    bottom: auto;
}
.op-player__audio.op-captions--detected .op-settings {
    bottom: auto;
    top: 35px;
}
.op-controls .op-controls__captions--on:before {
    color: red;
}
.op-captions__menu {
    bottom: 36px;
    overflow: visible;
    right: 59px;
    z-index: 10;
}
.op-captions__menu:after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(28, 28, 28, .9);
    content:'';
    height: 0;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 100%;
    width: 0;
}

/* WebVTT cues */
::cue {
    color:#ccc;
}
video:-webkit-media-text-track-display {
    top: -15%;
}

/* === Levels ================ */
.op-levels__menu {
    bottom: 36px;
    min-width: 73px;
    overflow: visible;
    right: 30px;
    z-index: 10;
}
.op-levels__menu:after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(28, 28, 28, .9);
    content:'';
    height: 0;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 100%;
    width: 0;
}

/* === Ads =================== */
.op-ads {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.op-ads--active {
    overflow: hidden;
}
.op-ads--active .op-controls__captions,
.op-ads--active .op-captions,
.op-ads--active .op-controls__settings {
    display: none;
}
.op-ads--active .op-controls__fullscreen {
    float: right;
}
.op-ads--active .op-controls .op-control__right ~ .op-control__right {
    margin-left: auto;
}
.op-ads--active .op-ads {
    z-index: 1;
}
.op-player[data-fullscreen='true'].op-ads--active .op-ads {
    z-index: 2147483645;
}

/* === Focus =================== */
.op-player:focus,
.op-player__play:focus,
.op-player > .op-controls *:focus {
    outline: dotted 1px #999;
}
.op-player.op-player__keyboard--inactive:focus,
.op-player.op-player__keyboard--inactive .op-player__play:focus,
.op-player.op-player__keyboard--inactive > .op-controls *:focus {
    outline: none;
}

/* === Fullscreen effect ========= */
.op-player.op-player__full {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -100;
}
.op-player__full .op-player__media,
.op-player__full .op-ads {
    height: auto;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: auto !important;
}

/* === Fit effect ======= */
.op-player__fit--wrapper {
    height: 100%;
    position: relative;
    width: 100%;
}
.op-player.op-player__fit {
    background: #000;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}
.op-player__fit .op-player__media,
.op-player__fit .op-ads {
    border: 0;
    display: block;
    height: 100%;
    min-height: 100%;
    width: 100%;
}

/* === Device-specific rules ========= */
.op-player__ios--iphone .op-player__play {
    margin-top: -5px;
}
.op-player.op-player__ios--iphone video::-webkit-media-controls,
.op-player.op-player__ios--iphone video::-webkit-media-text-track-container {
    display: block !important;
}
.op-player.op-player__ios--iphone video::cue {
    color: transparent;
    font-size: 0.001px;
}
.op-player.op-player__ios--iphone video::-webkit-media-text-track-display-backdrop {
    background: transparent !important;
}
.op-player[data-fullscreen='true'].op-player__ios--iphone video::cue {
    color: #fff;
    font-size: medium;
    font-size: initial;
}
.op-player[data-fullscreen='true'].op-player.op-player__ios--iphone video::-webkit-media-text-track-display-backdrop {
    background: #000000 !important;
    background: rgba(0, 0, 0, .498039) !important;
}