Sizing embed videos for desktop and mobile use

Hello, I'm having issues with video sizing for my website. I am using the embed block to add a YouTube video to my site but when I size it for the desktop and then go to the mobile version the video is much wider than the screen. Below is the embed code I;m using for the video block. One of the main reason I want to embed the video is so that I can control the "recommend" videos that YouTube suggest after the video has played.

<div><iframe width="1060" height="640" src="https://www.youtube.com/embed/D_tXgBEb-KE?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

How can I correct the sizing so it works both for desktop and mobile?

Hi,

Can you share link to page? We can check easier

Or try adding this to Design > Custom CSS first

@media screen and (max-width:767px) {
	iframe[src*="youtube"] {
		width: 100% !important;
}
}

Hello tuanphan,

Thank you for responding. Here is the link to the page https://www.exhaleyogaretreats.com/destination-yoga-teacher-trainings

If I add the custom CSS will it affect the videoblocks that are not upgraded to the fuildengine yet? Like in this link https://www.exhaleyogaretreats.com/300-hour-yoga-teacher-training-bali

Hello the custom CSS worked to size the video for mobile but it doesn't size the cover photo along with the video that has been added in YouTube. Any way to fix this?

Use this new code

@media screen and (max-width: 767px) {
    iframe[src*="youtube"] {
        width:100% !important;
        height: 300px;
    }
    .fe-647ff0c0377c007c12e4d656 {
    grid-template-rows: repeat(14,minmax(24px, auto)) !important;
}
}

Thank you so much for your help. The custom CSS worked!