WordPress ヘッダーメディアのYouTube動画を高さ固定で表示させたい

Question

こちらの記事を参考にWordPressサイトでヘッダーメディアを使ってトップページにYoutube動画を表示させています。

実現したいこと

動画の高さを画面いっぱいに固定して、ブラウザを狭めたときは中央を基準に左右がトリミングされるようにしたいと思っています。
理想はこういう形です→ http://demo.vs1.biz/videounit/

試したこと

cssのobject-fit: cover;を使えばいいのかと思って以下のようにしてみました。

functions.php

add_theme_support( 'custom-header', array(
  'width'         => 2200, //動画の幅
  'height'        => 935, //動画の高さ
  'flex-width'    => true,
  'flex-height'   => true,
  'header-text'   => true,
  'video'         => true
) );

該当ページPHPファイル

<div class="youtube_wrap">
	<div class="youtube_inner">
		<div class="youtube_cont">
			<?php the_custom_header_markup(); ?>
		</div>
	</div>
</div>

cssファイル

.youtube_wrap {
	display: block;
	position: relative;
	overflow: hidden;
}

.youtube_wrap::before {
	content: "";
	display: block;
	padding-top: 100vh; /*高さを画面いっぱいに*/
}

.youtube_inner {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.youtube_cont {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /*アスペクト比 16:9*/
}

.youtube_cont iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

ですが、これだとブラウザの幅を狭めると、左右がトリミングされず、動画が縮小されるだけです。
cssだけでは実装できないのでしょうか？JavaScriptの知識はあまりありません。

アドバイスお願いいたします。

Answer 1

以下の記述で自己解決いたしました。

該当ページ

<div class="youtube_wrap">
	<?php the_custom_header_markup(); ?>
</div>

css

.youtube_wrap {
	position: relative;
	overflow: hidden;
	height: 100vh;
}

#wp-custom-header-video {
	position: absolute;
	display: block;
	padding-top: 77px; //ヘッダーの高さ
	min-width: 100%;
	min-height:100%;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

Answer 2

以下の記述で自己解決いたしました。

該当ページ

<div class="youtube_wrap">
	<?php the_custom_header_markup(); ?>
</div>

css

.youtube_wrap {
	position: relative;
	overflow: hidden;
	height: 100vh;
}

#wp-custom-header-video {
	position: absolute;
	display: block;
	padding-top: 77px; //hヘッダーの高さ
	min-width: 100%;
	min-height:100%;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}