/* youtube.css — a YouTube embed.
 *
 * Yours: edit it, or delete the file.
 *
 * The markup is a thumbnail with a play button drawn over it, not an iframe.
 * Clicking swaps in the real player. That is deliberate: an iframe costs about
 * half a megabyte and several requests to YouTube whether or not anyone presses
 * play, and a post with three videos pays for it three times. If you delete
 * this file the video still works — it will just look like an unstyled image
 * with a stray element on top, because the play button is drawn in CSS.
 */

.velocity-youtube {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Height comes from padding, which is a percentage of the width — that is what
   holds the 16:9 box before the thumbnail loads, so the page does not jump. */
.velocity-youtube-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 0;
    padding-bottom: 56.25%;
}

.velocity-youtube-small {
    width: 40%;
    margin-inline: auto;
}

.velocity-youtube-medium {
    width: 70%;
    margin-inline: auto;
}

.velocity-youtube-full {
    width: 100%;
}

/* Both the facade and the player it becomes fill that box exactly. */
.velocity-youtube-iframe,
.velocity-youtube-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
}

.velocity-youtube-facade {
    padding: 0;
    border: 0;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.velocity-youtube-facade img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.velocity-youtube-facade:hover img,
.velocity-youtube-facade:focus-visible img {
    transform: scale(1.02);
    opacity: 0.85;
}

/* The play button: a red rounded rectangle with a white triangle made from
   borders. YouTube's own proportions, so it reads as the real thing. */
.velocity-youtube-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    border-radius: 14px;
    background: #ff0000;
    box-shadow: 0 2px 12px rgb(0 0 0 / 35%);
    transform: translate(-50%, -50%);
}

.velocity-youtube-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 18px solid #fff;
    /* -38% rather than -50%: a triangle looks centred slightly right of centre. */
    transform: translate(-38%, -50%);
}

@media (max-width: 500px) {
    .velocity-youtube-small,
    .velocity-youtube-medium {
        width: 100%;
    }
}