Alt-Web Design & Publishing: August 2015

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.

I hope you enjoyed this introduction to Bootstrap's responsive video classes and CSS viewport units.

By default, Bootstrap's Carousel component slides from right to left which is certainly fine for most projects that need a slider. Below is the default code for it. UPDATED for Bootstrap 3.3.6. By the way, my thanks to Lorempixel for the images.

LIVE DEMO


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Default Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--Bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<header class="row">
<h1>Bootstrap 3.3.6 Carousel Default Settings</h1>
</header>
</div>
<!--begin Bootstrap Carousel-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for items and captions -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1200/400/sports/4/" alt="...">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Details....</p></div>
</div>
<div class="item">
<img src="http://lorempixel.com/1200/400/sports/3/" alt="...">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Details....</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1200/400/sports/2/" alt="...">
<div class="carousel-caption">
<h3>Image 3</h3>
<p>Details....</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1200/400/sports/1/" alt="...">
<div class="carousel-caption">
<h3>Image 4</h3>
<p>Details....</p>
</div>
</div>
<!--end active-->
</div>
<!-- Left and right controls --> 
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> 
<!--end carousel-->
</div>
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

For a recent project, I needed a FADE transition and I wanted image captions and text to NOT be centered over my slides.

My custom CSS code:

<style>

@charset "utf-8";

/**Bootstrap Carousel FADE**/


.carousel img {width:100%}



.carousel-caption {

 background-color: rgba(0,0,0,0.5);

 position: absolute;

 right: 0;

 bottom: 0px;

 left: 0;

 z-index: 10;

 padding-top: 0;

 padding-bottom: 0px;

 color: #fff;

 text-align: left;

 padding-left: 2%;

}

.carousel-caption h3 {

 font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;

 letter-spacing: -1px;

 font-size: 24px;

 font-weight: bold;

 margin-bottom: 0;

 margin-top: 6px !important;

 text-align: left;

 text-shadow: 2px 1px 2px rgba(0,0,0,0.9);

}

.carousel-caption p {

 margin-top: 0;

 font-size: 14px;

 text-align: left;

}

.carousel-control { width: /*15%*/ 8% }

.carousel-indicators { bottom: 2px }

.carousel-indicators .active { background: #FDF7DE }


/**arrows**/

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {

 width: 25px;

 height: 25px;

 font-size: 25px;

}


.carousel-fade .carousel-inner .item {

  opacity: 0;

  transition-property: opacity;

}


.carousel-fade .carousel-inner .active {

  opacity: 1;

}


.carousel-fade .carousel-inner .active.left,

.carousel-fade .carousel-inner .active.right {

  left: 0;

  opacity: 0;

  z-index: 1;

}


.carousel-fade .carousel-inner .next.left,

.carousel-fade .carousel-inner .prev.right {

  opacity: 1;

}


.carousel-fade .carousel-control {

  z-index: 2;

}


/*WHAT'S NEW IN BS 3.3: Added transforms to improve carousel performance in modern browsers.
now override the 3.3 new styles for modern browsers & apply opacity*/

@media all and (transform-3d), (-webkit-transform-3d) {

.carousel-fade .carousel-inner > .item.next,  .carousel-fade .carousel-inner > .item.active.right {

 opacity: 0;

 -webkit-transform: translate3d(0, 0, 0);

 transform: translate3d(0, 0, 0);

}

.carousel-fade .carousel-inner > .item.prev,  .carousel-fade .carousel-inner > .item.active.left {

 opacity: 0;

 -webkit-transform: translate3d(0, 0, 0);

 transform: translate3d(0, 0, 0);

}

.carousel-fade .carousel-inner > .item.next.left,  .carousel-fade .carousel-inner > .item.prev.right,  .carousel-fade .carousel-inner > .item.active {

 opacity: 1;

 -webkit-transform: translate3d(0, 0, 0);

 transform: translate3d(0, 0, 0);

}

}

</style>

And finally, I added the carousel-fade class and a data-interval to myCarousel HTML code. Incidentally, if you set the data-interval value to "0", the slides do not rotate automatically. If you want a faster slide rotation, use a lower value. For slower rotation, use a higher value.


<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="7000">

FINAL LIVE DEMO

Tips & Tutorials for Web Designers

Wednesday, August 5, 2015

Responsive Videos in Bootstrap 3

Saturday, August 1, 2015

Customizing Bootstrap's Carousel