css/brivembed.css

/* ========================================================================
    Brivembed CSS
======================================================================== */
.embed-container {
    margin-bottom: 1em;
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
    width: 100%;
}

.embed-container embed,
.embed-container iframe,
.embed-container object,
.embed-container video {
    border-radius: var(--border-radius-4-sides);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.brivembed {
    background: #101010;
    border-radius: 1em;
    box-shadow: 8px 8px 8px rgba(255, 0, 0, 0.5),
        -8px -8px 8px rgba(255, 0, 0, 0.5),
        8px -8px 8px rgba(255, 0, 0, 0.5),
        -8px 8px 8px rgba(255, 0, 0, 0.5);
    color: #cbcbcb;
    margin-bottom: 1em;
    min-height: 255.71px;
    padding: 1em;
}

.brivembed h3 {
    margin-top: 0;
}

.brivembed-placeholder {
    box-sizing: border-box;
    display: grid;
    height: 100%;
    padding: 1em;
    place-items: center;
    text-align: center;
    width: 100%;
}

.brivembed-actions {
    align-items: center;
    display: flex;
    gap: 1em;
    justify-content: center;
    margin-top: .75em;
}

.brivembed-fullscreen {
    background: rgba(0, 0, 0, .65);
    border: 0;
    border-radius: 1em;
    color: #cbcbcb;
    cursor: pointer;
    padding: 1em;
    position: absolute;
    right: 1em;
    top: 1em;
    z-index: 2;
}

.brivembed-load {
    background: #f1d600;
    border: 0;
    border-radius: 1em;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
    padding: .5em 1em;
}

.brivembed-remember {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.2rem;
    gap: .5em;
    opacity: .85;
    user-select: none;
}

.brivembed-remember:hover {
    opacity: 1;
}

.brivembed-remember>.fa-square-check {
    color: #2dd55b;
}