title: Responsive iframes height with Bootstrap CSS
body: <p>I'm using Bootstrap's CSS technique for making responsive iframes; Wrapping the iframe with <code>.embed-responsive</code> CSS Class, along with <code>.embed-responsive-21by9</code> to specify the aspect ratio. (Basically adding <code>position: absolute;</code> for the iframe and <code>padding-top: 42.857143%;</code> for the iframe wrapper.</p>
  
  <p>This works very well with videos, but not with other iframes such as a Twitter tweet (in which the iframe has larger width than the height), leaving an empty vertical space.</p>
  
  <p>What are the solutions to overcome this, considering I'm using WordPress theme which automatically wraps all the iframes in my content with a predfined CSS Class, <code>.embed-responsive .embed-responsive-21by9</code> in mycase.</p>