WordPressのカスタム投稿からyoutube動画を挿入して、<?php the_content(); ?>を利用して動画を表示させているのですが、縦横比が崩れてしまうので調整したいです。

Question

現在、動画クリエイター様のポートフォリオを制作しております。
その為、今後はクライアント様本人でも簡単に自身が制作した動画をアップ出来、且つ制作実績の一覧としても残すことが出来るように、カスタム投稿タイプを使って、記事入力欄にてyoutubeのiframeタグをコピペして、その動画を引っ張り出すことで、動画の一覧表示をさせたいと思っております。
3つのyoutube動画を横並びにさせていです。

現状は以下のコードを実装することで、<?php the_content(); ?>にて記事入力欄にてコピペした動画を表示させております。
しかし、現状は以下の画像にある表示となっております。

<div class="works-container wow fadeIn" data-wow-delay="1.5s">
        <?php
            $args = array(
              'post_type' => 'work',
              'posts_per_page' => '3',
              'orderby' => 'DESC',
            );
            
            $top_page = new WP_Query($args);
            ?>
          <div class="works-videoWrap">
            <?php while ( $top_page->have_posts() ) : $top_page->the_post(); ?>
              <div class="works-video">
                <?php the_content(); ?>
              </div>
            <?php endwhile; wp_reset_postdata(); ?>
          </div>
</div>

自身で試した事としましては、以下の通りです。
①
「works-video」を「works-videoWrap」の親要素で囲い、works-videoWrapに対して、max-width: 30%;を当てた。
↓
エラーは無いが動画は表示されない状態。

②

<?php while ($top_page->have_posts() ) : $top_page->the_post(); ?>から始まるループ部分を「works-videoWrap」の親要素で囲み、「works-videoWrap」に対してmax-width: 30%;を当てた.

↓
動画のサイズは綺麗に表示されたが縦並びの為、「display: flex;」を当てたが、また動画の幅が狭まる。

③
「works-video」と「iframe」のそれぞれに付与したプロパティに「!important」を付けた。
↓
特に変化無し。

④
iframeを囲う「works-video」の要素に対して「padding-top: 56.25%」ではなく、
「aspect-ratio: 16/9;」を与える
↓
動画が表示されない

また、あらゆる参考記事を探してはいるのですが、どの記事においてもyoutubeのレスポンシブ対応におけるコードの書き方としては、
以下の書き方しか見つかりません。
今回は<?php the_content(); ?>から動画を引っ張ってきている為に少し違った実装方法が必要なのか？とも考えましたが、検証ツールを確認すると、「works-video」のタグ内にはiframeタグが生成されていることが確認できるので、基本的には以下のコードの考え方で合っているのか？とも考えております。

.video{
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
}
.video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

以下に改めて該当箇所のコードを添付致します。

<div class="works-container wow fadeIn" data-wow-delay="1.5s">
        <?php
            $args = array(
              'post_type' => 'work',
              'posts_per_page' => '3',
              'orderby' => 'DESC',
            );
            
            $top_page = new WP_Query($args);
            ?>
          <div class="works-videoWrap">
            <?php while ( $top_page->have_posts() ) : $top_page->the_post(); ?>
              <div class="works-video">
                <?php the_content(); ?>
              </div>
            <?php endwhile; wp_reset_postdata(); ?>
          </div>
      </div>

.works-container {
  display: flex;
  justify-content: space-around;
  max-width: 128rem;
  margin: 4rem auto 0;
  padding: 0 1rem;
  flex-wrap: wrap;
}

.works-videoWrap {
  width: 109rem;
  margin: 3rem auto 0;
  display: flex;
}

.works-video {
  position:relative;
  height: 0;
  width: 30%;
  padding-top: 56.25%;
}

.works-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

以上です！
よろしくお願い致します！

Answer 1

以下のコードにか買い換えて、

<?php while ( $top_page->have_posts() ) : $top_page->the_post(); ?>
            <div class="works-videoWrap">
              <div class="works-video">
                <?php the_content(); ?>
              </div>
            </div>
 <?php endwhile; wp_reset_postdata(); ?>

.works-videoWrap {
width: 30%;
padding: 0;
box-sizing: border-box;
}
を当てることで解決できました。