Here is a Fiddle for a solution, that is based on a CSS2 secret: https://jsfiddle.net/59f9uc5e/2/
<span class="tag"><div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"aspect-ratio"</span><span class="tag">></span> <span class="tag"><iframe</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">""</span> <span class="atn">width</span><span class="pun">=</span><span class="atv">"550"</span> <span class="atn">height</span><span class="pun">=</span><span class="atv">"275"</span> <span class="atn">frameborder</span><span class="pun">=</span><span class="atv">"0"</span><span class="tag">></iframe></span> <span class="tag"></div></span> <span class="tag"><style></span> <span class="com">/* This element defines the size the iframe will take. In this example we want to have a ratio of 25:14 */</span> <span class="pun">.</span><span class="pln">aspect-ratio </span><span class="pun">{</span> <span class="kwd">position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span> <span class="kwd">width</span><span class="pun">:</span> <span class="lit">100%</span><span class="pun">;</span> <span class="kwd">height</span><span class="pun">:</span> <span class="lit">0</span><span class="pun">;</span> <span class="kwd">padding-bottom</span><span class="pun">:</span> <span class="lit">56%</span><span class="pun">;</span> <span class="com">/* The height of the item will now be 56% of the width. */</span> <span class="pun">}</span> <span class="com">/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */</span> <span class="pun">.</span><span class="pln">aspect-ratio iframe </span><span class="pun">{</span> <span class="kwd">position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span> <span class="kwd">width</span><span class="pun">:</span> <span class="lit">100%</span><span class="pun">;</span> <span class="kwd">height</span><span class="pun">:</span> <span class="lit">100%</span><span class="pun">;</span> <span class="kwd">left</span><span class="pun">:</span> <span class="lit">0</span><span class="pun">;</span> <span class="kwd">top</span><span class="pun">:</span> <span class="lit">0</span><span class="pun">;</span> <span class="pun">}</span> <span class="tag"></style></span>