Responsive videos seem to be an after-thought for many websites. While text and images are easy to resize to mobile and tablet screens, videos have always required extra work. Even popular video sharing sites like Youtube.com still don’t have an easy “responsive” option and require specifying a video dimension for embedding.

bs-responsive-video

Luckily, the 3.2+ version of Bootstrap solves that with a few simple classes you apply. To use them, wrap the <iframe> code with a div and give it the class of embed-responsive and either embed-responsive-16×9 (for widescreen) or embed-responsive-4by3 (if your videos are stuck in the 1980s format).

The embed-responsive-item part is optional. Since the only requirement is the outer wrapper for the video, it’s easy to globally apply this previously embedded videos, saving a ton of work with legacy content. This little snippet of jquery using .wrap() will wrap any iframe for you.

If you’re upgrading from an older version of Bootstrap and compiled your CSS from the LESS source files, you’ll need to include the responsive-embed.less file in your bootstrap.less file so the new styles are available.

Leave a Reply

Your email address will not be published. Required fields are marked *