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.
