How to use youtube videos+bootstrap modals as tutorials

Contains tips for configurators working with Aware IM
Post Reply
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

How to use youtube videos+bootstrap modals as tutorials

Post by weblike »

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:

1. 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\
2. Where you want to use a video button you have to add this html code:

Code: Select all

<!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>                
Attachments
modals_bsv.zip
the result bsv
(35.26 KiB) Downloaded 622 times
modal.zip
bootstrap_files
(9.91 KiB) Downloaded 658 times
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: How to use youtube videos+bootstrap modals as tutorials

Post by hpl123 »

VERY nice George, thanks for sharing :).
Henrik (V8 Developer Ed. - Windows)
customaware
Posts: 2391
Joined: Mon Jul 02, 2012 12:24 am
Location: Ulaanbaatar, Mongolia

Re: How to use youtube videos+bootstrap modals as tutorials

Post by customaware »

Excellent Georghe.

Nice stuff. Thanx
Cheers,
Mark
_________________
AwareIM 6.0, 8.7, 8.8, 9.0 , MariaDB, Windows 10, Ubuntu Linux. Theme: Default, Browser: Arc
Upcloud, Obsidian....
Image
Post Reply