.video-box{
    width: 100%;
    padding-bottom: 56.25%;
}
.video-box video{
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
}
.video-box .over,.video-thumbnail-wrapper .over{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--color-black-60);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.video-box .over svg,.video-thumbnail-wrapper .over svg{
    width: 150px;
    height: 100px;
    fill: white;
}
.video-thumbnail-wrapper .over svg{
    width: 100px;
    height: 70px;
}
.video-thumbnail-wrapper .over{
    opacity:0;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}
.video-thumbnail-wrapper{
    position: relative;
    padding-bottom: 56.25%;
    cursor: pointer;
}
.video-thumbnail-wrapper img{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.video-thumbnail-wrapper:hover .over{
    opacity: 1;
}