video height lifehsck

video height lifehsck

by Boba Poshtar

HTML

<div class="container">
	<div class="wrap"></div>
</div>
<div class="container">
	<div class="wrap">
		<span class="iframe"></span>
	</div>	
</div>

CSS

.container { position: relative; margin: 0 auto 20px; width: 50%;}
.wrap { position: relative; padding-bottom: 60%; background: yellow; }
span { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 4px 8px; outline: 1px solid red;}

JavaScript

window.addEventListener('resize', function(){
	let span = document.querySelector('span');
	let w = span.offsetWidth;
	let h = span.offsetHeight;
	span.innerHTML = 'size: ' + w + ' x ' + h + '<br>ratio: ' + h * 100 / w + '%';
});
window.dispatchEvent(new Event('resize'));