Embedded Youtube video is not filling the screen

Question

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

I think this can only be the fixed iframe width of 560px. I do know though that if you change that to `width="100%"` only the iframe will widen, the video will remain the same size. So I think there must be a setting in the Youtube API somewhere? — Cutey from Cute Code, Nov 05 '21 at 10:02
I haven't tried it myself but this looks pretty good.... https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed — Cutey from Cute Code, Nov 06 '21 at 09:21
I hope this https://stackoverflow.com/questions/22429866/embed-youtube-videos-that-play-in-fullscreen-automatically or https://stackoverflow.com/questions/20182409/how-to-make-a-youtube-embedded-video-a-full-page-width-one helps. Related answered questions. — Stevemats, Nov 07 '21 at 15:45
@Stevemats that didn't work https://johnandcricket.com/test.html — mlegg, Nov 07 '21 at 17:49

score 2 · Answer 1 · answered Nov 08 '21 at 09:48

Firstly you should remove these classes

<div class="container mx-auto mb-4">

Then add w-100 class to embed-responsive element

<div class="embed-responsive embed-responsive-16by9 w-100">

After that add min-height: 100vh style to your iframe

iframe{min-height:100vh;}

Now you have full screen youtube embed.

score 1 · Answer 2 · answered Nov 07 '21 at 12:32

1

Remove width="560" and add style="width: 100%;"

answered Nov 07 '21 at 12:32

Lajos Arpad

64,414
37
100
175

I tried that, this is the live test page https://johnandcricket.com/test.html but it didn't work out like the image above – mlegg Nov 07 '21 at 17:35
@mlegg you did not add `style="width: 100%;" on the test site. – Lajos Arpad Nov 07 '21 at 22:54
https://johnandcricket.com/test.html can you refresh your cache on that page to see your code. I just updated it again, thanks – mlegg Nov 07 '21 at 23:37
@mlegg I can see it. I suppose that the main problem now is the large white gap at the right-hand side, which is due to the fact that you have a CSS rule for `.embed-responsive`, which says `width: 90%;`. You can override this for this specific element by adding `style="width: 100%;"` – Lajos Arpad Nov 08 '21 at 14:23

score 1 · Answer 3 · answered Nov 07 '21 at 19:27

I have made the width 100% and given the iframe a min-height. I hope it serves the purpose you seek. Find screenshot below. Also, if you provided the entire code, then maybe I could suite the video size to match the design. Vote me up if this helps. Thanks

<div class="embed-responsive embed-responsive-16by9">
    <iframe style="width: 100%; min-height: 315px;" 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>
</div>

Embedded Youtube video is not filling the screen

3 Answers3