asqkpg
Last Updated: February 25, 2016
·
2.486K
· aalaap
Aalaap filter 512

Responsive YouTube Video Embeds

I wrote this specifically for a Bootstrap 3.0-based responsive layout, but the @media queries are fairly generic, so it should work for any layout.

@media (min-width: 992px) {
    .youtubevid {
        width: 960px;
        height: 540px; /* 720px */
    }
}

@media (min-width: 767px) and (max-width: 991px) {
    .youtubevid {
        width: 640px;
        height: 360px; /* 480px */
    }
}

@media (min-width: 481px) and (max-width: 766px) {
    .youtubevid {
        width: 480px;
        height: 270px; /* 320px */
    }
}

@media (max-width: 480px) {
    .youtubevid {
        width: 300px;
        height: 169px; /* 225px */
    }
}

Just give each YouTube video IFRAME a class of youtubevid and you're done.

Note: These values are intended to be used with newer, wide-screen YouTube videos. If you're using older, 4:3 aspect ratio videos, then use the /* commented */ values for height instead. If you don't know the aspect ratio of videos (i.e. dynamic content), then use the wide-screen values, which will cause black bars on the sides of older videos. If you use a 4:3 size, the newer wide-screen videos get cropped from the sides.

Say Thanks
Respond