Crevier's Tech Toolbox
Home CyberSecurity

responsive YouTube video

This is a live example of a solution I found on this web page. This sets an embedded YouTube video at a maximum width. Notice that if you resize your browser window smaller, the video shrinks with it. And if you're viewing this page on a mobile phone, the video is still sized nicely.

The key is to start with the standard YouTube embed code, using an iframe with a specific dimension. In this case, the YouTube video is 560 x 315. So, when you view the source of this page, you'll see that a max-width on the video is set to 560. But you'll also see that the top padding of that div is set to be the percentage of the height to the width.

Enough explanation, just view the source and steal the code.

Note that without a responsive video like this, when you view an embedded video on your page using a mobile device, the video is too wide. This then makes the entire page too wide, which means that some of your content is off the right edge of the page.

• View the source of this web page to get the code needed to reproduce the feature explained. •