Adjust height on iframe of video

Question

I am using TinyMCE as my WYSIWYG text editor, so iframes are created with no tags. The solutions I have online all use jQuery to adjust iframes with particular tags, but how can I adjust all iframes on the page? I have tried using CSS for the width: 100% and it works correctly, but when I add height: auto it does not adjust ajust correspondingly.

How can I make it so that the untagged iframe adjusts its height automatically to the width of the page?

Answer 1

There's no way to specify this with CSS, the iframe needs to resolve to an absolute height (and the content of the iframe will adjust to the size of the iframe, not the other way around).

However, if what you're embedding is relatively predictable, in that the aspect ratio of the videos you're embedding is constant, here's an alternative by using a wrapper div over the iframe:

HTML

<div class='video-wrapper'>
  <iframe ...></iframe>
</div>

CSS

.video-wrapper {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

.video-wrapper iframe {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

You plug in your aspect ratio in the padding-bottom property of the wrapper div, and it is computed by the formula: video_height / video_width * 100. For example, a video with the 16:9 aspect ratio that gives you 9 / 16 * 100 = 56.25%.

Now, the tricky part is getting the wrapper <div> inside TinyMCE, and that might not be possible unless editing the underlying HTML. The alternative would be to use jQuery to wrap all iframes inside divs:

$('iframe').wrap('<div class="video-wrapper"></div>');

Hope this helps!