making an iframe responsive that is inside a div

Question

I am trying to make iframe responsive for all screen.

  <div class="iframe-class">
    <iframe src="https://www.youtube.com/embed/PZEwPJzMKGg"></iframe>
  </div>

try this link: https://stackoverflow.com/questions/25228056/responsive-iframe-using-bootstrap — Kannan K, Feb 23 '18 at 04:52

score 1 · Answer 1 · answered Feb 23 '18 at 04:54

With Bootstrap 3.2 you can wrap each iframe in the responsive-embed wrapper of your choice:

http://getbootstrap.com/components/#responsive-embed

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

Reference: Responsive iframe using Bootstrap

score 1 · Answer 2 · answered Feb 23 '18 at 04:54

Try this:

  <!-- 16:9 aspect ratio -->
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PZEwPJzMKGg"></iframe>
  </div>

  <!-- 4:3 aspect ratio -->
  <div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PZEwPJzMKGg"></iframe>
  </div>

score 0 · Accepted Answer · answered Feb 23 '18 at 05:07

0

Make iframe responsive for all screen

This will work for you sure.

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/PZEwPJzMKGg"></iframe>
  </div>

Refrence Link

answered Feb 23 '18 at 05:07

Hasanuzzaman Sattar

592
1
5
20

making an iframe responsive that is inside a div

3 Answers3

Make iframe responsive for all screen