.tac-video {
    position: relative;
    max-width: 100%;
    padding-top: var(--tac-video-ratio, 56.25%);
    background-color: #333333;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tac-video--has-preview {
    background-image:
        linear-gradient(rgb(51 51 51 / 65%), rgb(51 51 51 / 65%)),
        var(--tac-video-preview);
}

.tac-video--has-preview .tac_activate {
    background: transparent;
}

.tac-video .tac_activate .tac_float > span[role="paragraph"] {
    display: block;
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 0 auto 1rem;
    padding: .75rem 1rem;
    border-radius: var(--tac-radius, 4px);
    background: rgb(0 0 0 / 78%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.tac-video > div {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.tac-video iframe,
.tac-video .tac-fallback {
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.tac-video__source {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    margin: .75rem 0 0 .5rem;
    padding: 0 .875rem;
    border: 0;
    border-radius: var(--tac-radius, 4px);
    background-color: var(--tac-customize-bg, #555555);
    color: var(--tac-customize-text, #ffffff);
    font: inherit;
    line-height: 1;
    text-decoration: none;
}

.tac-video__source:hover,
.tac-video__source:focus-visible {
    background-color: var(--tac-accent, #1b870b);
    color: #ffffff;
    text-decoration: none;
}

.tac-video__source:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}