Youtube Video Embedded Via Iframe Ignoring Z-Index

YouTube Video Embedded via iframe Ignoring z-index?

Try adding wmode, it seems to have two parameters.

&wmode=Opaque

&wmode=transparent

I can't find a technical reason why it works, or much more explanation but take at look at this query.

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

or this

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

z-index issue with YouTube iFrame (in full screen mode)

This is actually to do with the opacity and the animation you have. Try removing the fadein ease-in-out 1 CSS animation and check the result.

Take a look at this excellent article from Phillip Walton, should help clear a few things up: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

iframe in FireFox not respecting z-index

Try adding wmode, it seems to have two parameters.

&wmode=Opaque
&wmode=transparent

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

For more info
check

YouTube Video Embedded via iframe Ignoring z-index?

Make YouTube video embed responsive

You can try setting a max-width on the iframe.

-- Video not loading in snippet ... Fiddle

.container {
  display: flex;
  justify-content: center;
}

iframe {
  max-width: 900px;
  max-height: 400px;
}

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div class="container">
  <div class="ratio ratio-16x9">
     <iframe src="https://www.youtube.com/embed/kq7CdSf7ocA?rel=0" title="YouTube video 
      player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
      encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
 </div>

Youtube Video Embedded Via Iframe Ignoring Z-Index