Ashwin Gupta Ashwin Gupta - 6 months ago 12
CSS Question

How can I make an iframe inside of a <td> 33 percent of the screen width?

I have an I frame inside of a

<td>
element. I'd like to dynamically scale the
iframe
so that it takes up
33%
of the screen
width
(and automatically fixes the
height
).

When I try this:

<iframe src="google drive presentation url" frameborder="0" width="33vw" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>


It only takes up
33%
of the
<td>
element (which also has text in it).

Also, I tried using
width="33%"
but that didn't work either.

How can I fix this?

Answer

you must give width using CSS instead.

body {
  margin: 0
}
td {
  width: 33.3%;
  background: red
}
iframe {
  width: 100%
}
<table>
  <tr>
    <td>
      <iframe src="google drive presentation url" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    </td>
    <td>
      Foo Bar
    </td>
    <td>
      Foo Bar
    </td>
  </tr>
</table>

Comments