Html – Why is this iframe not displaying?

I’m trying to embed a youtube video in a webpage. Seems like simple enough stuff, but for some reason the iframe isn’t displaying.

I’ve even tried replacing the tag altogether with one copypasted from another help thread on here that the OP seemed to have confirmed as working, but even with their working code nothing shows up on my page.

Here’s the current iframe tag code I’m using:

<iframe width="560" height="315" src="https://www.youtube.com/embed/riFyKUyGb4k" frameborder="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

If I view the source code for the rendered page, the iframe code is there.

But on the actual rendered page, there’s nothing there. Not even an empty frameborder.

In devtools, the parent div that contains the iframe is empty — it doesn’t show the iframe element as even existing at all in the rendered page.

The container div’s only CSS just sets the width and height of the div, and sets the background to grey. I can see the div on the rendered page, but the div is empty.

What am I missing here?

EDIT: Adding all relevant code in case it helps

HTML:

<div id="vid_cont">

    <div id="vid_embed">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/riFyKUyGb4k" 
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

</div>

CSS:

#vid_embed {
    margin: min(3vw, 3vh) auto;
    width: min(44vw, 44vh);
    height: min(44vw, 44vh);
    background: #eee;
}