Friday, August 14, 2015

Bootstrap Tutorial Lesson 9 - Responsive Multimedia Video and Pictures

In this Step by step Bootstrap Tutorial Lesson 9 - Responsive Multimedia Video and Pictures
   we see the manipulation of videos and pictures in a responsive way, and build an Application for use on desktop computers and Mobile devices screens. This App will display videos and pictures, with round corners, ellipses and more  .
This is how this Bootstrap Application is shown:
Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures


Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures    1


And this is the way how it looks the Video display in the Ripple Emulator , for Nexus Galaxy :    

Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures  2




Bootstrap Tutorial Lesson 9 - Responsive Multimedia Video and Pictures


This App can be started by using a free Bootstrap template downloaded for example from www.initializr.com/ (explained in this short Tutorial : Bootstrap Templates), or if you wish you can start from scratch. Just write this jQuery and Bootstrap references in the Head:


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">


Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures     3


Also place the following javascripts  before the </body> closing tag :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


To use a Mobile Emulator, take a look at this short tutorial on installing the FREE Ripple Emulator.


1) Using Responsive Images in a Bootstrap Web Page:


The Bootstrap web pages are designed to be opened both in Mobile devices and desktop machines. 
Therefore, to be Responsive means that the images will be small in small screens, and bigger in larger screens.
To achieve that, use the class=img-responsive , as follows:
Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures    4

Also, we use 3 types of display here: the "img-circle" at the top, the "img-rounded" corners in the middle, and the "img-thumbnail" at the bottom, as defined in the Bootstrap Official Web Site :

Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures     5

Because we set the Grid layout as col-xs-12, in Mobile devices each image will spread over all 12 columns. However, in large screens, we set col-lg-4, so each picture will take only 4 cells out of 12:

Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures     6



2) Using Responsive Videos in a Bootstrap Web Page:

Exactly the same thing applies for HTML5 Video controls, as you can see here:


Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures   7


Therefore displayed this way :

Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and

Bootstrap Tutorial Lesson 8 - Responsive Multimedia  Pictures



We also added some style  code for the App:

body {
    padding-top: 60px;
    padding-bottom: 20px;
}

.jumbotron h1 {
    
    color: #a8a3a3;
}

h2 {
    font: 900 18px Verdana;
    color: #a8a3a3;
}

.well p{
    font: 700 12px Verdana !important;    
    color: #a8a3a3;
}

.well-footer, .well-footer a {
    font: 900 10px Comic Sans MS;
    color: #a8a3a3;
}

.alert {
    font: 600 9px Verdana;
}

.centered {
    text-align: center;
}



That's all. Our Multimedia will be displayed this way:

1- In Mobile devices : 

 Tutorial Lesson 8 - Responsive Multimedia Video and Pictures

 Lesson 8 - Responsive Multimedia Video and Pictures

 8 - Responsive Multimedia Video and Pictures



Responsive Multimedia Video and Pictures





The display for Nexus Mobile devices screens is as follows:
 Multimedia Video and Pictures






2- On Medium and Big desktops:


 Video and Pictures

 and Pictures

 Tutorial  Responsive Multimedia Video and Pictures

 Lesson  Multimedia Video and Pictures





      by Carmel Schvartzman


כתב: כרמל שוורצמן