ナビゲーションがyoutube に隠れないようにしたいです。

【問題点】ヘッダートップにハンバーガーメニューを設置し、ハンバーガーメニューをクリックするとナビゲーションが出るようにしているのですが、埋め込みしているYoutubeのところのみ、ヘッダートップもナビゲーションもyoutubeに隠れてしまいます。(Youtube以外は、ちゃんと最前面になっています。）
ナビゲーションがyoutubeに隠れないようにしたいので、改善策を教えていただけないでしょうか。

【詳細】
・ヘッダートップはposition:fixed;で固定。
・ナビゲーションはindex:9999;にしています。
・改善策を調べて、下記のようにhtmlにwmodeを入れてみましたが、改善しません。

<div class="movie">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/●●●●●●-●●●●?wmode=transparent"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen wmode="opaque"
</iframe>
</div>

・ちなみに、Youtubeはレスポンシブ対応のため、下記CSSにしております。

CSS
.movie{
	position: relative;
	width: 100%;
	height:0px;
	padding-top: 65%;
	z-index: 10;
}
.movie iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

・レスポンシブ対応を諦めてCSSのpositionを無くしてみたらYoutubeも後ろに隠れたのですが、
そうすると今度はYoutubeのサイズが変になってしまいます。

まだ初心者で、上記情報では足りないかもしれませんが。。。
よろしくお願いいたします。