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&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>