There is a standard trick to make HTML block with given proportions:
<div id="wrapper" style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
<div id="content" style="position:absolute; left:0; top:0; width:100%; height:100%">
Since padding is computed according to containing element width, it’s possible to use it along with width to get required proportions (16:9 in this example, 56.25% = 100% * 9 / 16). And content block is positioned absolutely to use the space taken by padding.
After learning about Custom Elements I decided to see if I can abstract the trick and turn it into something clean and reusable. So it could be used just like this:
See the code and demo below. In addition, there is also a slightly improved HTML+CSS version.