Friday, August 7, 2015

Bootstrap Tutorial Lesson 7 - Responsive YouTube Video Modal Window

In this Step by step Bootstrap Tutorial Lesson 7 - Responsive YouTube Video Modal Window
   we explain the implementation of a responsive Video Modal window, and build an App for use on both desktop computers and all kinds of Mobile devices screens. This App will contain a Modal Window that will display a YouTube Video and also Alert messages to the user, by using jQuery.
You can download the complete app from the following GitHub repository:
This is how this Bootstrap Application is shown:

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

Bootstrap Tutorial Lesson 7 - Responsive YouTube Video Modal Window

You can begin building this Application by working with a template downloaded from (as is shown in this short Tutorial about Bootstrap Templates), or you can start from scratch by writing the following jQuery and Bootstrap references in the HTML5 <head>:

<script src="//"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">

And this javascript references will be located before you close the "Body" tag :

<script src="//"></script>  
<script src=""></script>

If you want to use a Mobile Emulator, how to get one is explained in this short tutorial on installing the FREE Ripple Emulator.

1) Create a Button to open the Modal Bootstrap Video:

Generally, the Bootstrap Modal forms will open by adding a data-toggle=modal and a data-target=[YourModalWindowMarkup] directives , to some button:

Here we add also a "data-url" directive with the URL of the YouTube video to be shown.

2) Create the Modal Window:

First, we'll import the markup for the Modal Window as-is from the Official Web Site , containing a Header, a Body and a Footer. Just COPY-PASTE the markup from the URL above.

Our Modal Window will contain an inline Frame iframe, which will be set programmatically using javascript:

The Modal Window will be closed by a button that's using the directive data-dismiss=modal.
We can also close this window by using jQuery , with the   .modal("toggle").

3) Avoiding Clickjacking by using jQuery:

Finally we code the javascript to set the Iframe URL "src", using jQuery as follows:

We also append "autoplay" to the video URL to force it to play when loaded.

We also add custom style to the  CSS3 file  :

body {
    padding-top: 50px;
    padding-bottom: 20px;

.jumbotron h1 {
    font: 900 25px Verdana;
    color: #a8a3a3;

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

.well {
    font: 900 12px Comic Sans MS;
    color: #a8a3a3;

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

.alert {
    font: 600 9px Verdana;

.centered {
    text-align: center;

And that's all. Our Modal Video Window 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

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