Responsive YouTube Embed

We look at how you can make any YouTube embed code responsive with just a little tweaking to the CSS and the Embed code.

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 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!

Blog Categories

Popular Blog entries

Email Spoofing If it appears that someone has been sending emails from your email account, but there is nothing in your 'sent items' and no record of the emails being sent from the server, then there is a good cha...

3D Secure 2.0 From September 2019, most e-commerce payments must change to comply with a new Strong Customer Authentication (SCA) requirement. The Card Schemes (Mastercard, Visa, etc.) introduced a new authenticati...

Font Awesome not working in Mozilla Firefox? Font Awesome icons do not load correctly in Firefox due to a browser restriction when the Font Awesome JS/font files are loaded via a CDN. The reason for the issue is CORS and how it’s implement...

Creating a Website Brief To give our customers an accurate quote, we need to gather your information regarding your company and its goals for the website project. Please read the questions below and try your best to answer as...