/* Runtime display only: no editor IDs, HTML rewriting, JavaScript or database changes.
 * Exact YouTube host prefixes avoid styling maps, forms and other embedded services.
 * Keep authored desktop widths; clamp to the available width on smaller screens.
 */
.hf-editor-content iframe:is(
    [src^="https://www.youtube.com/" i],
    [src^="http://www.youtube.com/" i],
    [src^="//www.youtube.com/" i],
    [src^="https://youtube.com/" i],
    [src^="http://youtube.com/" i],
    [src^="//youtube.com/" i],
    [src^="https://m.youtube.com/" i],
    [src^="http://m.youtube.com/" i],
    [src^="//m.youtube.com/" i],
    [src^="https://www.youtube-nocookie.com/" i],
    [src^="http://www.youtube-nocookie.com/" i],
    [src^="//www.youtube-nocookie.com/" i],
    [src^="https://youtube-nocookie.com/" i],
    [src^="http://youtube-nocookie.com/" i],
    [src^="//youtube-nocookie.com/" i]
) {
    display: block;
    position: static !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    /* YouTube requires a player viewport of at least 200px high. */
    min-height: 200px !important;
    aspect-ratio: var(--hf-video-ratio, 16 / 9) !important;
}

/* Old content may already contain one or more padding-based video wrappers.
 * Reset only wrappers containing YouTube; their iframe now supplies the height.
 */
.hf-editor-content :is(.video-container, .video-wrapper, .responsive-iframe, .embed-responsive, .yt-video):has(
    iframe:is(
        [src^="https://www.youtube.com/" i],
        [src^="http://www.youtube.com/" i],
        [src^="//www.youtube.com/" i],
        [src^="https://youtube.com/" i],
        [src^="http://youtube.com/" i],
        [src^="//youtube.com/" i],
        [src^="https://m.youtube.com/" i],
        [src^="http://m.youtube.com/" i],
        [src^="//m.youtube.com/" i],
        [src^="https://www.youtube-nocookie.com/" i],
        [src^="http://www.youtube-nocookie.com/" i],
        [src^="//www.youtube-nocookie.com/" i],
        [src^="https://youtube-nocookie.com/" i],
        [src^="http://youtube-nocookie.com/" i],
        [src^="//youtube-nocookie.com/" i]
    )
) {
    position: static !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
}

/* Bootstrap's old embed wrapper also reserves space through a pseudo-element. */
.hf-editor-content .embed-responsive:has(
    iframe:is(
        [src^="https://www.youtube.com/" i], [src^="http://www.youtube.com/" i], [src^="//www.youtube.com/" i],
        [src^="https://youtube.com/" i], [src^="http://youtube.com/" i], [src^="//youtube.com/" i],
        [src^="https://m.youtube.com/" i], [src^="http://m.youtube.com/" i], [src^="//m.youtube.com/" i],
        [src^="https://www.youtube-nocookie.com/" i], [src^="http://www.youtube-nocookie.com/" i], [src^="//www.youtube-nocookie.com/" i],
        [src^="https://youtube-nocookie.com/" i], [src^="http://youtube-nocookie.com/" i], [src^="//youtube-nocookie.com/" i]
    )
)::before {
    content: none !important;
}