CSS dynamic width aspect ratio

Positioning a centered video iframe on a responive website only knowing the 16:9 aspect ratio but no fixed size?

Your CSS code (in less syntax):

.videoframe {
	position: absolute;
	top: 10%;
	left: 25%;
	border: 2px solid #ffffff;
	width: 50%;
	.outer {
		width: 100%;
		padding-top: 56.25%; /* 16:9 ratio, at 4:3 it will be 75% */
		position: relative;
		.inner {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}
}

Some HTML fragment:

<div class="videoframe">
  <div class="outer">
    <div class="inner">
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/...?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>