Embedded YouTube Videos Not Showing in Chrome on ANY Computer/Browser (...Help out a non-profit, please!)

Hi all,

Our website (www.statelessdignity.org) has a couple of videos embedded in iFrames on it (one for several months now!), and I've *just* learned that the videos don't display at all in Chrome. I've looked into the problem, and deduced that it's not my computer/browser (I've tried every hack in the book, like enabling Flash and JS, and asked friends to check on their own devices): the videos don't display in Chrome on any device. For me, it instead just shows as a big empty iFrame container/blank space, though at least one friend reported that they saw no blank space when they tried it.

So anyway, I've tried researching this and seen a couple others with a similar issue, but their coding hacks (below) also don't seem to solve the problem. ...Considering YouTube is owned by Google—and that the majority of visitors (at least for us) use Chrome—I'm a little shocked that this would be an issue. ...But then again, I've seen other embedded YouTube videos on other sites, so there must be a way! 

Anyway, the two pages where we're having this issue now are here: 
https://www.statelessdignity.org/news/2018/9/23/2018-bama-speech (it should show between the second and third paragraphs)
https://www.statelessdignity.org/news/2019/12/1/give-the-gift-of-dignity-this-givingtuesday (at the bottom of the blog post, just above the footer)

Anyway, here are a couple of the CSS/HTML coding solutions I have tried to no avail. ...Does anyone have any tips for making this work?

(And *bonus question*: does anyone have a solution to make the video vertical on the second link (changing the aspect ratio/removing the black space on the sides)? I've also researched this, but again, nothing I found worked.)

Here is the first approach I tried:

<style>
.container {
      position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
 .container {
       position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class="container" style="text-align: center;"><iframe width="75%" height=75% class="video" src="https://youtube.com/embed/8KS5xbuoNe0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

And here is the second:

<style>
  .container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.container iframe, .container object, .container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
</style>

<div class="container" style="text-align: center;"><iframe width="75%" height=75% class="video" src="https://youtube.com/embed/8KS5xbuoNe0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

Hi Ashley, maybe try embedding the video without styling as an inline code block, see if that show up.

If it does, try applying styling in global Custom CSS afterwards?