.vc-video-with-preview {
    margin-bottom: 25px;
}

.vc-video-with-preview .img-wrapper {
    cursor: pointer;
    position: relative;
}

.vc-video-with-preview .img-wrapper::before {
    content: "";
    display: block;
    width: 97px;
    height: 97px;
    position: absolute;
    top: calc(50% - 49px);
    left: calc(50% - 49px);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="97" height="97" viewBox="0 0 97 97" fill="none"><circle cx="48.5" cy="48.5" r="48.5" fill="%23003873"/><path d="M75.913 49.9058L34.7935 73.6462L34.7935 26.1654L75.913 49.9058Z" fill="white"/></svg>');
}

.vc-video-with-preview .img-wrapper:hover::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="97" height="97" viewBox="0 0 97 97" fill="none"><circle cx="48.5" cy="48.5" r="48.5" fill="%23002347"/><path d="M75.913 49.9058L34.7935 73.6462L34.7935 26.1654L75.913 49.9058Z" fill="white"/></svg>');
}

.vc-video-with-preview .img-wrapper img {
    width: -webkit-fill-available;
    aspect-ratio: 16 / 9;
}

.vc-video-with-preview .video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.vc-video-with-preview .video-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
}