CODEWITHSUNDEEP
htmltwitter-bootstrapyoutubebootstrap-5
mlegg
mlegg

Reputation: 832

Embedded Youtube video is not filling the screen

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

Upvotes: 3

Views: 1177

Answers (3)

Gurkan Atik
Gurkan Atik

Reputation: 478

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.

enter image description here

Upvotes: 2

Dankyi Anno Kwaku
Dankyi Anno Kwaku

Reputation: 1293

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>

enter image description here

Upvotes: 1

Lajos Arpad
Lajos Arpad

Reputation: 76601

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

enter image description here

Upvotes: 1

Related Questions