For future reference this is how to style YouTube embeds so that they are responsive (scss-format):

.tube-embed {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
    }
}

Wrap embed code to div with class .tube-embed (this technique courtesy of all top 10 hits on search “youtube embed responsive” but I wanted my own copy-paste place)

The only non-obvious bit here is the padding-bottom: 56.25%; which makes sure that embed is in the usual aspect ratio 16/9 (I wonder if CSS aspect-ratio would help here 🤔.

I use this technique in my language learning blog: Russian Verbs - Past Tense | Three Words. I am planning to make it an Eleventy short-code some time soon.