[data-video-frame-role="wrapper"]{
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    margin-bottom: 0 !important;
}	

[data-video-frame-role="iconWrapper"]{
    height: 100%;
}

[data-video-frame-role="icon"]{
    display: block;
    width: 85px;
    height: 80px;
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
}

.play-icon-inner{
    fill: #fff;
}

.play-icon-outer{
    transition: .1s fill ease-in-out;
    fill: #212121;
    fill-opacity: .8;
}

[data-video-frame-role="wrapper"]:hover .play-icon-outer{
    fill: #f00;
    fill-opacity: 1;
}

.load-icon{
    fill: none;
    stroke: #fff;
    stroke-width: 4px;
    stroke-opacity: .8;
    width: 100%;
    height: auto;
}

.isLoading{
    animation-name: rotateLoading;
    animation-timing-function: cubic-bezier(.59,.69,.57,.46);
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

[data-video-frame-role="image"]{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    left: 0;
}

[data-video-frame-role="video-box"]{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}

.hidden{
    display: none;
}

@keyframes rotateLoading{
    0%{
        transform: rotate(0deg);
    }

    50%{
        transform: rotate(180deg);
    }

    100%{
        transform: rotate(360deg);
    }
}