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:

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

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">

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:

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 :

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:

2) Using Responsive Videos in a Bootstrap Web Page:

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

Therefore displayed this way :

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 : 

The display for Nexus Mobile devices screens is as follows:

2- On Medium and Big desktops:

      by Carmel Schvartzman

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