7

I have read many post and tried everything to make the iframe responsive and keeping the 16-9 ratio... it is not bad but the video is still cropped in the youtube frame.

What is the trick with bootstrap 5?

<div class="embed-responsive embed-responsive-16by9" style="width:800px; height:450px">
      <iframe class="embed-responsive" title="YouTube video player" src="{{ $image['image']['url'] }}" frameborder="0" allowfullscreen="" width="100%" height="100%"></iframe>
</div>
Paul Godard
  • 1,055
  • 1
  • 14
  • 30

4 Answers4

13

Was having the same problem, documentation on the bootstrap site says this:

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" title="YouTube video player" src="https://www.youtube.com/watch?v=jNQXAC9IVRw" allowfullscreen=""></iframe>
</div>

But this doesn't work, height was being ignored.

I found a solution on MD Bootstrap docs:

<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" allowfullscreen></iframe>
</div>

MD Bootstrap: Embeds

Works perfect for me on BS5 if you add height & width

<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" style="max-width: 100%;height: 100%;" allowfullscreen></iframe>
</div>

This information can also be found in the bootstrap 5 documentation:

dhhepting
  • 70
  • 7
Bim
  • 451
  • 4
  • 5
6

This soluction was the only worked at all in bootstrap 5:

<div class="col-12 col-md-8 offset-md-2 col-lg-8 offset-lg-2">
      <div class="ratio ratio-16x9 text-center mt-4 mb-4 ">
      <iframe class="embed-responsive-item"  src="https://www.youtube.com/embed/DTpvdyzxQWE?controls=0" style="max-width: 100%;height: 100%;" allowfullscreen></iframe>
    </div>
    </div>
Wilson Kitth Real
  • 61
  • 1
  • 1
0

This version should work.

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" title="YouTube video player" src="https://www.youtube.com/watch?v=jNQXAC9IVRw" allowfullscreen=""></iframe>
</div>
techboyg5
  • 370
  • 2
  • 10
0

Don't ask me why but during some testing adding older bootstrap css did the trick for me while using the bootstrap format as posted by Jnic:

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
rotterdam
  • 1