Responsive Video Wrapper

responsive-video-wrapper.md

padding-bottom is calculated using the aspect ratio of the video. a 16:9 video has a padding-bottom of 56.25%, while a 4:3 video has a padding-bottom of 75%.

More detailed article at Smashing Magazine

.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.videowrapper iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Another great resource for responsive iframes, with SASS functions https://benmarshall.me/responsive-iframes/

@function ratio($width, $height) {
  return percentage( $height / $width);
}

.videowrapper  {
	    position: relative;
	    padding-bottom: 56.25%;
	    padding-top: 35px;
	    height: 0;
	    overflow: hidden;

	    iframe {
	    	position: absolute;
	    	top:0;
	    	left: 0;
	    	width: 100%;
	    	height: 100%;
	    }

	    &.16x9 {
	    	padding-bottom: ratio(16, 9);
	    }

	    &.4x3 {
	    	padding-bottom: ratio(4, 3);
	    }
	}