Use aspect-ratio CSS property

The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.

1 . Create the css rule in your respective css file

 .aspect-video {     aspect-ratio: 16 / 9; }

2 . Add this css class to class attribute in iframe tag and change value of attribute width to width="100%"

if you use Tailwind CSS in your project exist the same class calledaspect-video.

See reference in link below
https://tailwindcss.com/docs/aspect-ratio#setting-the-aspect-ratio

 <iframe      width="100%"   src="https://www.youtube.com/embed/"    allow="accelerometer;    autoplay;    clipboard-write;    encrypted-media;    gyroscope;    picture-in-picture;   web-share fullscreen"    allowFullScreen></iframe>

REFERENCE :https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
https://tailwindcss.com/docs/aspect-ratio#setting-the-aspect-ratio