Embedded yourube video is not filling the screen

[mlegg10]

I am trying to build a website for my friend’s wedding. I’m using Bootstrap 5 and the embedded video is not filling up the screen size. Here is a live test page

HTML:

<div class="embed-responsive embed-responsive-16by9 mx-auto"><iframe width="560" height="315" src="https://www.youtube.com/embed/S8smZWM_dl8" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Do you need anymore code? I would like to get the video full width with the height to be automatically decided by the screen size. Thank you

[Wanuja97]

change iframe width as a 100%. Then it will take a 100% width according to it’s parent element.

[limakid]

I prefer to set the iframe width to 1920px, because it‘s the maximum width the video can get in order to be seen with good quality, right?

However, as per you say you are using Bootstrap, in the same div class you can add “w-75”, if you want your screen not to fill up the whole viewport.

Another optional issue: if you just set width 100%, the monitor with higher resolutions could render your video pretty pixeled (distorted), so add a class:
.myvideo{
max-width:1920px;
}.

So, a 4k monitor will show only the 1920 pixels to keep the image quality of your video, will be seen smaller of course but with good quality.

I‘m not sure if Bootstrap has a property for max-width in its prebuilt classes; otherwise just inject it on your div togetehr with “…embed-responsive… myvideo mx-auto…etc.”

[mlegg10]

I tried those and this is how it looks. The width is ok but the height is not