alt-web logo

Wednesday, August 5, 2015

Responsive Videos in Bootstrap 3

Bootstrap has a nice set of classes for embedding responsive videos and preserving their aspect ratios in multiple device widths.

Embedded 4:3 Responsive Aspect Ratio (YouTube video)
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>


Embedded 16:9 Responsive Aspect Ratio (YouTube video)
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>


But what if you're not using an <iframe> from YouTube, etc... ?  No worries.  It still works a treat!  Simply add the embed-responsive-item to your <video> tag.   BTW, thanks to techslides.com for the sample video.

4:3 Responsive Aspect Ratio (your MP4 video)
<div class="embed-responsive embed-responsive-4by3">
<video autoplay loop class="embed-responsive-item">
<!--replace this sample with your video-->
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

</div>


16:9 Responsive Aspect Ratio (your MP4 video)
<div class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item">
<!--replace this sample with your video-->
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>


Adding Overlays and Captions to Responsive Videos

I had a client who wanted to use his looping video sequence as a background layer, add a semi-opaque overlay and some text that would actually rescale with the responsive video.  Ouch!  My initial idea was to use a poster-image but that didn't meet all the requirements.  So back to the drawing board...

Long story short, I decided to use a figure caption. Why a figcaption you ask?  Why not?!  It's certainly semantic.  With some creative CSS code and a font-size expressed in VW - Viewport Width instead of pixels, it will do exactly what I need in all but the hopelessly inferior browsers (bad browsers, you know who you are).

CSS Code:

.overlay figcaption {
    position: absolute;
    z-index: 1000;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.6);
    /**text, adjust as req'd**/
    padding-top: 15%;
    padding-left: 5%;
    color: #FFF;
    font-weight: 700;
    text-align: center;
    font-size: 20px; /**some fallback value**/
    font-size: 5.4vw; /**responsive size**/
}


If you're all new to Viewport Units here are some links.
http://caniuse.com/
https://css-tricks.com/

Below is the revised HTML markup with figures:

4:3 Responsive Aspect Ratio with Figcaption
<div class="embed-responsive embed-responsive-4by3">
<figure class="overlay">
<video autoplay loop class="embed-responsive-item">
<!--replace this sample with your video-->
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

<figcaption>figcaption<br>
Lorem ipsum dolor<br>
<a href="http://example.com" class="btn btn-lg btn-info">Learn more</a></figcaption>
</figure>

</div>


16:9 Responsive Aspect Ratio with Figcaption
<div class="embed-responsive embed-responsive-16by9">
<figure class="overlay">
<video autoplay loop class="embed-responsive-item">
<!--replace this sample with your video-->
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

<figcaption>figcaption<br>
Lorem ipsum dolor<br>
<a href="http://example.com" class="btn btn-lg btn-info">Learn more</a></figcaption>
</figure>

</div>


LIVE DEMO
This is a screenshot at mobile width.
Responsive Aspect Ratio
I hope you enjoyed this introduction to Bootstrap's responsive video classes and CSS viewport units.