Responsive YouTube Embedded Videos on both mobile and narrow desktop screens

Hi,

I'm trying to make the embedded youtube videos on my website responsive to both mobile and narrow screens on laptops/desktops.

I am encountering the issue on my Video Editing page in the Video Essays section (https://www.danielzemke.com/work/video-editing) and my Voice Over page (https://www.danielzemke.com/work/voice-overs). The videos look great on a mobile device and a full screen browser, but once you start shrinking the browser, they begin to overlap.

Can you help me change the code of my embedded videos so that they're responsive to a changing browser size?

Thanks!

Below is an example of one of the embedded youtube codes. All of the embedded youtube videos have the same code with the exception of their individual source youtube videos.

<iframe width="690" height="390" src="https://www.youtube.com/embed/wBEAjjioZFI?controls=0&amp;start=1098&end=1285" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<style>
  @media screen and (max-width:767px) {
  iframe[src*="youtube"] {
    width: 100% !important;
    height: 200px;
}
  }
</style>

Which screen size do you see problem? I try checking some devices & it looks fine

Hey Tuanphan,

When I change my browser screen from full screen to custom and drag its size up and down, that's when I'll see the videos overlapping one another. I figured if someone is looking at my website any less than fullscreen that it will appear that way. Any coding I can use to avoid that?

Thanks!

Dan