WordPressの投稿記事内に載せたyoutubeの動画を縦横比を維持して表示させたいです。

現在、カスタム投稿タイプを使用して投稿記事内にyoutube動画を埋め込み、その動画をTOPページにて表示をさせたいのですが、画像の端が切れた状態になっており、且つ画面幅を狭めていくとさらに動画の幅が小さくなってしまいます。
ブラウザの画面を狭めても動画の縦横比を維持しながらもブラウザ画面幅に応じて小さくするにはどのようにすればいいでしょうか？

以下は自身で試したことです
①、.works-videoのwidthを100%にした
↓
特に変わらず、画面幅を狭めると動画も端が切れていく。

②、投稿画面にてyoutubeの動画を埋め込む際に「カスタムHTML」からyoutubeのiframeコードを入力した
↓
動画が表示されない。

③、.works-containerの要素幅をwidth100%にした
↓
最初の表示時点では綺麗に適切なサイズで表示されるのですが、画面幅を狭めると動画も端が切れていく。

④、WordPressの投稿画面より、classiceditorに切り替え、iframeのコードをテキストとして入力したところ、
スマホでは綺麗に画面幅に応じて表示されたが、PCだと一つ一つの動画が縦長になってしまう。

以上です。
以下に該当箇所のコードを添付致します。
よろしくお願い致します！

PHP
1<div class="works-container wow fadeIn" data-wow-delay="1.5s">
2     <?php
3          $args = array(
4              'post_type' => 'work',
5              'posts_per_page' => '3',
6              'orderby' => 'DESC',
7          );
8
9          $top_page = new WP_Query($args);
10     ?>
11      <?php while ( $top_page->have_posts() ) : $top_page->the_post(); ?>
12         <div class="works-video">
13            <?php the_content(); ?>
14         </div>
15      <?php endwhile; wp_reset_postdata(); ?>
16</div>

CSS
1.works-container {
2  display: flex;
3  justify-content: space-around;
4  max-width: 128rem;
5  margin: 4rem auto 0;
6  padding: 0 1rem;
7}
8
9.works-video {
10  padding-top: 56.2%;
11  position: relative;
12  width: 60rem;
13  height: 0;
14  overflow: hidden;
15}
16
17.works-video figure {
18  position: absolute;
19	top: 0;
20	left: 0;
21	width: 100%;
22	height: 100%;
23}