Full Stack PHP Developer
HTML
<div class="videoWrapper">
<iframe src="http://www.youtube.com/embed/mC-zw0zCCtg" width="560" height="349">
</iframe>
</div>
CSS
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Relative length units specify a length relative to another length property. Relative length units scale better between different rendering mediums.
Source: W3School
rem is a CSS unit that is relative to the font-size of the root element.
0.25rem is 4px
0.50rem is 8px
0.75rem is 12px
1rem is 16px
Here’s a helpful chrome extension to help you convert px to rem called PxtoRem: https://chrome.google.com/webstore/detail/pxtorem/ldbemkmafmibhpncgagpegmhbhpolnlp?hl=en