A responsive, centered youtube video container

responsiveYoutube

<style type="text/css">
	.videoWrapper{
		display: flex;
		justify-content:center;
		margin:1.75em;
	}
	@media screen and (min-width: 768px){
		.videoWrapper{
			margin: 1.75em;
		}
	}
	@media screen and (max-width: 767px){
		.videoWrapper {
			position: relative;
			padding-bottom: 50%; /* 16:9 */
			/*padding-top: 25px;*/
			height: 0;
			margin:1em;
		}
		.videoWrapper iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

</style>


<picture class="videoWrapper">
	<iframe id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/zdfYZpp3Xk8"
frameborder="0" allowfullscreen>
	</iframe>
</picture>