Hi all,
In this weekend I have played with bootstrap modals, as I want to use my youtube videos as help tutorials in my apps.
Here is the result: https://youtu.be/1g5IeAUsbBo
Here are the steps:
- You have to download modal.zip and you will find 2 files modal.min.css and modal.min.js (in fact this is compiled bootstrap specific for modals).
copy modal.min.css in c:\AwareIM\Tomcat\webapps\AwareIM\Custom\CSS\my_app\
copy modal.min.js in c:\AwareIM\Tomcat\webapps\AwareIM\Custom\JS\my_app\
- Where you want to use a video button you have to add this html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.bs-example{
margin: 20px;
}
.modal-content iframe{
margin: 0 auto;
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = $("#cartoonVideo").attr('src');
/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
$("#myModal").on('hide.bs.modal', function(){
$("#cartoonVideo").attr('src', '');
});
/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
$("#myModal").on('show.bs.modal', function(){
$("#cartoonVideo").attr('src', url);
});
});
</script>
</head>
<body>
<!-- Button HTML (to Trigger Modal) -->
<button href="#myModal" type="button" class="btn btn-danger" data-toggle="modal"><i class="fa fa-youtube-play "></i>
Video
</button>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">YouTube Video</h4>
</div>
<div class="modal-body">
<iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
