Add exit button to video box

Please see datapassion.net and click on "Data Upload" shown in the below image. This will open a video. When the video is playing, it exits the video when:
1. The video finishes. (correction: this feature works on "Videos.." tab but not in "Resume.." tab yet.)
2. User clicks on escape key.
3. User clicks outside the video box.
XbuttonToCloseVideo.pngBut, with iPhone for example, where there is no escape key, user cannot exit the video on demand.

Question: How can I have an x-button to close a running video?
<!DOCTYPE html>
<html>
<head>
	<title>Resume- Mike Eghtebas</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  
	<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
	<script type="text/javascript" src="lightbox.js"></script>
	
	<link rel="stylesheet" type="text/css" href="./styles/resume.css"/>

	<script>
	$(function() {
  $(document).on('keyup',function(e) {
    if (e.keyCode == 27) {
      $('.overlay').remove();
    }
  });
  $('body').on('click','.overlay, .close', function() {
    $('.overlay').remove();
  });
  $('body').on('click','.videobox', function(e) {
    e.stopPropagation();
  });
  $('.video-link').click(function(e) {
    var el = $(this);
    e.preventDefault();
  var vbox =  $('<div/>').addClass('videobox').attr('id','conter');
    vbox.append($('<a/>').addClass('close'));
    vbox.append($('<video/>').prop({autoplay: true, controls: true}).attr('src', el.attr('href')));
    vbox.append($('<div/>').html(el.data('description')));

    $('body')
      .append(
        $('<div class="overlay"/>').height(Math.max($(document).height(), $(window).height()))
      .append(
        vbox
      )
    );
  var left  = ($(window).width() - vbox.width()) >> 1;
  var top = $(window).scrollTop() + 50;

  vbox.css({
    left: left + 'px',
    top: top + 'px'
  });
  });
});

</script>
<script type="text/javascript" 

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
    		body
		{
			font-family:Helvetica, Arial;
		}
     		.backdrop
		{
			position:absolute;
			top:0px;
                        left:0px;
			width:100%;
			height:100%;
                        background:#000;
			opacity:.0;
			filter:alpha(opacity=0);
			z-index:50;
			display: none
		}

     		.box
		{
			position:absolute;
			top:20%;
                        left:30%;
			width:370px;
			height:370px;
			background:#ffffff;
align:center;
			z-index:51;
                        padding:10px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
                        border-radius:5px;
			-moz-box-shadow:0px 0px 5px #444444;
			-webkit-box-shadow:0px 0px 5px #444444;
			box-shadow:0px 0px 5px #444444;
			display: none
		}

     		.close
		{
			float:right;
			margin-right:6px;
			cursor:pointer;
		}		
		</style>
		<script type="text/javascript" >
			$(document).ready(function(){
				$('.lightbox').click(function(){
					$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
					$('.box').animate({'opacity':'1.00'}, 300, 'linear');
					$('.backdrop, .box').css('display', 'block'); 
				});
			
				$('.close').click(function(){
					close_box();
				});
				$('.backdrop').click(function(){
					close_box();
				});
				function close_box(){
					$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
						$('.backdrop, .box').css('display', 'none');
					});
				}
	
			});
		</script>
</head>
<body>
<div class="content">

		<div class="btn-group-vertical">
			<a href="index.html" class="current btn btn-default">Resume</a>
			<a href="Videos.html" class="btn btn-default">Videos...</a>
			<a href="Projects.html" class="btn btn-default">Projects...</a>
			<a href="certificate.html" class="btn btn-default">Certificates...</a>
			<a href="more.html" class="btn btn-default">More...</a>

				<div class="btn-group">
					<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
						Download
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="resources/Resume_Mike_Eghtebas_March15_2015.docx">Resume.docx</a></li>
						<li><a href="resources/Resume_Mike_Eghtebas_March15_2015.pdf" target="_blank">Resume.pdf</a></li>
					</ul>
				</div>

		</div>
		
	<div class="wrapper">
   
        <div class="left-col"> 
			<a href="#" class="lightbox"><img src="./images/MMEImageTumb.jpg" alt="Head shot." width="78" height="60"/></a>
            <div class="backdrop">Open Ligtbox</div>
		    <div class="box"><div class="close">x</div><img src="./images/MMEImage.jpg" alt="Head shot." width="350" height="350"/></div>
		</div> <!-- <div class="left-col"> -->

		<div class="verticalGapTop"> </div>

		<div class="right-col nameBlock">
			<p>
				<span class="name">Mike M Eghtebas</span><br>
				<span class="title">Database Development</span> (1-10: <b>9</b>) <span class="title">& Web Programming</span> (1-10: <b>7</b>)<br>
			</P>
		</div> <!-- <div class="right-col nameBlock"> -->
           
		<div class="horizontalGap"> </div>   

		<div class="left-colBottom">
               <span class="contactBlue">Contact:</span><br/>
                meghtebas@gmail.com<br/>
                Phone: (949) 533-8239<br/><br/>

                <span class="contactBlue"> Location:</span><br/>
				
			
				Los Angeles, CA <a id="A2" href="./images/location.png" target="_blank"><abbr title="see location map...">90024</abbr></a>
				
				<br/><br/>
                <span class="contactBlue">Web & Git:</span><br/>
                <a id="A1" href="#" >Datapassion.net</a><br/>
				
                <a id="A2a" href="https://github.com/Eghtebas"  target="_blank"><abbr title="sample codes not uploaded yet.">Github.com/Eghtebas</abbr></a><br/><br/>
                <span class="contactBlue">Education:</span><br/>
                <b>University Of Oklahoma</b><br/>
                BS Mechanical Engineering<br/>
                <b>Santa Monica College</b><br/>
                 Web Programing (<a id="A3" href="./images/courseList.png" target="_blank"><abbr title="see course list...">4.0 GPA</abbr></a>)<br/><br/><br/>
				


		 
				<div class="contactBlue center1" >Programing:</div>
                <img width=175 height=176  src="./images/piechart.png" alt="Programing Skill Piechart"><br/>
                <span class="others"><b>Others:</b> Git, MySQL, Java, PHP</span><br/><br/><br/>
                <span class="contactBlue">Certifications:</span><br/>
                <b>SQL Server</b>, <a id="A4" href="./images/mta.png" target="_blank"><abbr title="see certificate.">MTA 98-364</abbr></a>,<br/>
				Querying SQL Server 2012:<br/>
				<a id="A4a" href="./images/certNHZ.png" target="_blank"><abbr title="See certificate of completion">20-461 Course</abbr></a>
				<abbr title="The exam is scheduled for December 22, 2015">70-461 Exam</abbr><br/><br/>
                <b>Professional Engineer</b><br/>
                State of California, Active <br/>
                (PE License: <a id="A5" href="./images/PE.png" target="_blank"><abbr title="see Professional Engineering License">M-27236</abbr></a>)<br/><br/> 
                <b>Microsoft Solutions MSF</b> <br/>
				Software development cycle<br/><br/>
				<span class="contactBlue">Articles:</span><br/>
                <a id="A5a" href="http://www.experts-exchange.com/articles/18366/Subqueries-at-a-glance.html" target="_blank"><abbr title="see the article.">Subqueries at a glance</abbr></a><br/>
				<a id="A5x" href="http://www.experts-exchange.com/articles/20279/Isolation-levels-at-a-glance-Part-1-2.html" target="_blank"><abbr title="see the article.">Isolation Levels at a ..., 1/2</abbr></a><br/><br/>
				<span class="contactBlue">Societies:</span><br/>
                <abbr title="see the site."><a id="A6"  href="http://www.experts-exchange.com/" target="_blank">Experts-Exchange.com</a></abbr><br/>
                <a id="A5y" href="./certificate.html" ><abbr title="see sample solutions I have provided.">Solutions provided</abbr></a>: 1,600 <br/>
                <a id="A5c" href="resources/eeCertificates.pdf"  target="_blank"><abbr title="see cetificates...">EE Certificates</abbr></a>: 11<br/><br/>
                SQL Server Users Group  <br/>
                <b>UCLA </b>, <a id="A7"  href="https://sqlpass.org/" target="_blank"><abbr title="see the site.">Sqlpass.org</abbr></a> <br/>
                
		</div> <!-- <div class="left-colBottom"> -->
 			
		<div class="verticalGapBottom"> </div>

		<div class="right-colBottom">
                <div class="skills">
                     <br/>
                    <span class="blue18">Skill</span><span  class="black18"> Highlights</span>
                </div>
                <div class="skillsDescription">
                    <span>•	<b>Extensive data analysis </b>experience, dynamic reporting and developing <b>automation tools </b>to streamline activities that <b>boost productivity</b>.<br >
                          •	Expertise in designing<b> user friendly interfaces</b>, experienced in <b>T-SQL, ASP.Net, C#, VB.Net,<abbr title="Add ADO.NET skills here..."> ADO.Net</abbr>, 
						  <abbr title="MS Query, remotely manipute Excel files in bulk...">VBA</abbr>, 
						  <abbr title="Install complex Macros, propogate and install macros to hundered of other excel files remotely.">Excel Macros</abbr></b>, and VBA coding.<br/><br/>
                    </span>
                </div>

                <div class="experience">
                    <span  class="blue18">Exp</span><span  class="black18">rience </span>
                </div><!--div class="experience"--> 

                <div class="date">
                        06/2014 Present
                </div> 
                <div class="companyCity"> 
                    <div class="company"> Consulting  </div> 
                    <div class="city">  Los Angeles, CA </div> 
                    <div class="workDescription">
				    Developed <a href="./Projects.html#DataScraping"><abbr title="see code used."><b>Data Scraping</b></abbr></a> application in <b>
					ASP.net/C#</b> using <b>XPath</b> to collect millions of data points to store in 
					SQL Server database for drinking water quality analysis by the client. Worked on developing two Kaiser Permanente demo projects, one in  
					<a href="./Projects.html#PerformanceDashboard" target="_blank"><abbr title="see demo project with mock data."><b>ASP.net/ C#</b></abbr></a>
					and the other in <a href="./Projects.html#PerformanceDashboard" target="_blank"><abbr title="see demo project with mock data."><b>ASP.net/ vb.net</b></abbr></a>
					using mock data.  
					Worked on SQL Server Database Administration Fundamentals and passed 
					<a id="A4k" href="./images/mta.png" target="_blank"><abbr title="see certificate"><b>Exam 98-364</b></abbr></a>, obtained 20-461, 
					<a id="A4ax" href="./images/certNHZ.png" target="_blank"><abbr title="see certificate of completion"><b>Querying SQL Server 2012</b></abbr></a>, certification of completion.
					<br/><br>
					</div>
                </div>

                 <div class="date"><!-- * * * * * * * * * * * Kaiser Permanente Performance Dashboard * * * * * * * * * * * -->
                        08/2013 <br/>06/2014
                </div> 
                <div class="companyCity"> 
                    <div class="company"> Kaiser Permanente </div> 
                    <div class="city"> Los Angeles, CA </div> 
                    <div class="workDescription">                                    
						<b>Senior Data Analyst & Developer</b>: Developed 
						<a href="./Projects.html#PerformanceDashboard"><abbr title="see more on this project."><b>Performance Dashboard</b></abbr></a>
						application in <b>ASP.net, C#/ SQL Server</b>. Developed point-and-click 
						
<source src="./resources/KaiserDatauploadETL.mp4" type="video/mp4">
<a class="video-link" href="./resources/KaiserDatauploadETL.mp4" 
data-description="Data Upload, Automated ETL (ESC to cancel.)">
<abbr title="watch demo video.">Data Upload</abbr></a>
						
<!--
<video height="100" controls data-height="500">
    <source src="./resources/KaiserDatauploadETL.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>						
	-->					
						
						<b>ETL</b> (Extract Transform Load) module to be operated by junior staff with beginner skills as opposed to assigning it to a data adminstrator.
						<br>
						<b>Senior Data Analyst & Developer</b>: Design and Develop 
						<a href="./Projects.html#PerformanceDashboard"><abbr title="see more on this project."><b>KP ReConnect</b></abbr></a>
						Activity Management System in <b>ASP.net, VB.net/ SQL Server</b>. The project was member-centric to repatriate patient members from other facilities back to a Kaiser healthcare facility. 
						<br><br>
                    </div>
                </div>  

                 <div class="date"><!-- * * * * * * * * * * * Warner Brothers * * * * * * * * * * * -->
                        09/2012 <br/>01/2013
                </div> 
                <div class="companyCity"> 
                    <div class="company">Warner Brothers  </div> 
                    <div class="city">Burbank, CA </div> 
                    <div class="workDescription">
                            <b>Data Analyst</b>: Normalized the tables in an existing <b>MS Access</b> project, named WB Central Repository Application (WB CeRA), transforming it to a robust functioning application; automated a few functionalities and added many point and click data entry methods. <br/><br/>
                     </div>
                </div> 

                <div class="date"><!-- * * * * * * * * * * * Kaiser Permanente Decision Support Application * * * * * * * * * * * -->
                       01/2011 <br >06/2011
                </div> 
                <div class="companyCity"> 
                    <div class="company">Kaiser Permanente  </div> 
                    <div class="city">Pasadena, CA </div> 
                    <div class="workDescription">
                            <b>Data Analyst & Developer</b>: Developed  Decision Support Application prototyped in <b>MS Access</b> to improve 
							patient quality care based on physician comments nation-wide. Designed Web application in <b>Java</b> with 
							<abbr title="see PL/SQL for the project."><a href="./projects.html#Oracle"><b>Oracle</b></a></abbr> backend for implementation on the Web. 
							The comment logs were coded to be auto-tagged to facilitate robust search and produce actionable methods. <br ><br/>
                     </div>
                </div> 

                 <div class="date"><!-- * * * * * * * * * * * SWAPE, Environmental Consultants * * * * * * * * * * * -->
                      03/2009 <br />01/2011
                </div> 
                <div class="companyCity"> 
                    <div class="company">SWAPE, Environmental Consultants  </div> 
                    <div class="city">Santa Monica, CA </div> 
                    <div class="workDescription">
                            <b>Database developer</b>: Designed and developed proprietary applications to be used by the client law firms in litigations related 
							to the environment. Via <b>MS Access, SQL Server</b>, automated <b>ETL</b>s to extract data from other sources and  
							generate the required reports and charts.<br/><br/>
                    </div>
                </div> 

                <div class="date"><!-- * * * * * * * * * * * AIG SunAmerica * * * * * * * * * * * -->
                      12/2006 <br/>03/2009
                </div> 
                <div class="companyCity"> 
                    <div class="company"><abbr title="read more on AIG..."><a href="./more.html">AIG SunAmerica</a></abbr>  </div> 
                    <div class="city">Los Angeles, CA </div> 
                    <div class="workDescription">
                        <b>Productivity Specialist</b>: Automated and streamlined many office operations. The activities involved developing 
						specifications, system analysis, and building database applications using <b>SQL Server, MS Access, Excel Macros, 
						VB 6.0, VB.NET</b>, and <b>VBA</b> coding. The automations made the existing tasks easier and saved lots of time and effort.<br/><br/>
                    </div>
                </div> 

                <div class="date"><!-- * * * * * * * * * * * Other Companies * * * * * * * * * * * -->
                      Prior to <br >12/2006
                </div> 
                <div class="companyCity"> 
                    <div class="companyOther">Other Companies...</div> 
                    <div class="cityOther">Los Angeles & Orange County, CA </div> 
                    <div class="workDescription">
                        20th Century Fox,
						<a class="video-link" href="./resources/4_DataAnalysis.mp4" data-description="ExxonMobil Overtime Reporting Application, EMORA, 2005 (ESC to cancel.)"><abbr title="watch demo video.">ExxonMobil</abbr></a>
						, Honda, Kawasaki, KPC Global Care, Long Beach Memorial, Noresco, Sechrist Industries, Toyota, 
 						<abbr id="A6d" title="see '3. Data Slice & Dice System (DSDS):' on this project."><a href="./Videos.html#DSDS">Union Bank</a></abbr>
						, Washington Mutual.           
					</div>
                </div> 

		</div> <!-- <div class="right-colBottom"> -->
	</div> <!-- <div class="wrapper"> -->

	<div class="footer"> 
        <div class="note"><span>September 2015 update, single page</span> </div>
		<div class="cssLogo"><img style="border:0;width:44px;height:15px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue"  alt="Valid CSS!" /> </div>
	</div>

</div><!-- <div class="content"> -->
</body>
</html>

Open in new window

LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
The provision is there you are just missing a class and an image.

The class you need to add is
.close {
  background: transparent url("images/close.png") no-repeat scroll center center;
  display: block;
  height: 36px;
  opacity: 0.8;
  position: absolute;
  right: -18px;
  top: -18px;
  width: 36px;
}

Open in new window

The image is attached below.
The image needs to be placed in an images folder that is in the same folder as the CSS file that you add the above to - i.e. I am assuming you will add it to resume.css - in which case the images folder must be in the same folder as resume.css

Refer to this sample for a working example http://www.marcorpsa.com/ee/t1130.html

Using the console I added the above style to your site and pointed the image to a local version on my dev machine - works perfectly.
close.png
1
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
This gave me close button and also eliminated the validation error I was having.

Two remaining issues are:

1. The starting volume of the video-audio is at its max (too high).
2. The auto exit I had (1 second after the video ends) is no longer there in the new code.
0
Julian HansenCommented:
The following replacement code should do it.
NB: One thing I have noticed with dynamically setting the volume - for which I have not found a workaround yet - is that the volume is set correctly but the video control does not reflect the new volume setting.
  $('.video-link').click(function(e) {
    var el = $(this);
    e.preventDefault();
    var vbox =  $('<div/>').addClass('videobox').attr('id','conter');
    vbox.append($('<a/>').addClass('close'));
    var video = $('<video/>')
        .prop({
          autoplay: true, 
          controls: true, 
          volume: 0.5
        })
        .attr({
          src: el.attr('href')
        });
    vbox.append(video);
    vbox.append($('<div/>').html(el.data('description')));
      $(video).on('ended', function() {
        setTimeout(function() {
          $('.overlay').remove();
      }, 2000);
    });
  
    $('body')
      .append(
        $('<div class="overlay"/>').height(Math.max($(document).height(), $(window).height()))
      .append(
        vbox
      )
    );
  
    var left  = ($(window).width() - vbox.width()) >> 1;
    var top = $(window).scrollTop() + 50;
  
    vbox.css({
      left: left + 'px',
      top: top + 'px'
    });
  });
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you.
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.