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'));*/