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:
https://github.com/CarmelSoftware/Bootstrap_YouTubeModalWindow
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 www.initializr.com/ (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="//code.jquery.com/jquery-1.11.3.min.js"></script>
<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">





And this javascript references will be located before you close the "Body" 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>




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 http://getbootstrap.com 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


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