A Responsive Youtube Embed

When embedding a Youtube video into a responsive website you will notice the video does not resize properly and will not show the complete video on smaller devices. This trick will allow you to make your Youtube embeds responsive so they will be viewable across all devices.

1. Wrap your Iframe embed with a div and give it the class yt-wrap

<div class="yt-wrap">
         <iframe width="560" height="315" src="//www.youtube.com/embed/TkEHI2MCTRY" frameborder="0" allowfullscreen></iframe>
</div> 

2. Add the following CSS to your stylesheet


.yt-wrap {
	width: 100%;
	padding-top: 32%;
	padding-bottom: 32%;
	position: relative;
}

.yt-wrap iframe {
	width: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

There you go, you’re Youtube embedded video should be responsive. If you are having troubles or have tricks of your own feel free to leave a comment below.