Have you ever tried to make a YouTube video responsive? Surprisingly, YouTube does not provide a responsive embed function. All the embed options only offer a fixed width/height. Which can be problematic on tablets/mobiles etc.

Since all our website builds are now responsive - we have found a solution which requires modifying the Embed code a little... The fix was actually quite simple but we wanted to share it with everyone... Here’s how...

First, take your embed code and add a <div></div> around it. Give this a class name of "video-container" as shown:

Secondly, edit your CSS style sheet and add the following to it:

video-container { position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute;top: 0;left: 0;width: 100%;height: 100%; }

Thats it! away you go. Your YouTube embed videos are now responsive!