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">
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>
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:
<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">
<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
כתב: כרמל שוורצמן
No comments:
Post a Comment