x button to close video...

I have 4 video player icons on the page included here. When they are clicked on, as expected, they start playing and at when end is reached the video screen shrinks back to video icon.

Problem: After video starts, users doesn't have any means of closing the video unless they fast-forward it to the end.

Question: How can I add x-button to exit video play. Also, include esc key in the code (to exit the video) for additional convenience?  
<!DOCTYPE html>
<html><head><title>More Descriptions</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" type="text/css" href="./styles/resume.css"/>
	<script>
$(function() {
  $('video').on('play', function (e) {
    // IGNORE PLAY EVENT IF ALREADY RESIZED
    if ($(this).data('oldheight') > 0) return;
  
    // SAVE THE CURRENT HEIGHT
    $(this).data('oldheight', $(this).height());
  
    // GET THE NEW HEIGHT DEFAULT TO 400 IF NOT SET
    var newheight = $(this).data('height') || 400;
  
    // SET THE NEW HEIGHT
    $(this).css({height: newheight + 'px'});
  });
  
  $('video').on('ended', function (e) {
     var element = $(this);
     setTimeout(function() {
       // GET THE OLD HEIGHT DEFAULT TO 100 IF NOT SET
       var oldheight = element.data('oldheight') || 100;
		
       // SET THE DEFAULT HEIGHT
       element.css({height: oldheight + 'px'});
	  
       // RESTORE THE FULL HEIGHT VALUE
       element.data('oldheight', 0);
     }, 10);
  });
});
</script>
</head>
<body>
<div class="content">

		<div class="btn-group-vertical">
			<a href="index.html" class="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="current 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"> 
		</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 & Web Programming</span><br>
			</P>
		</div> <!-- <div class="right-col nameBlock"> -->
           
		<div class="horizontalGap"> </div>   

		<div class="left-colBottom">
                
		</div> <!-- <div class="left-colBottom"> -->
 			
		<div class="verticalGapBottom"> </div>

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


                <div class="skills">
                     
					 <a id="UploadVideo"></a><br/>
                    <span class="blue18">Demo Videos:</span>
					<hr>
                <div class="companyCity"> 
                    <div class="workDescription">
					   <b>1. Data Upload, Automated ETL:</b><br/>
					   At <b>Kaiser Permanente</b>, we discussed the administration of monthly data from different sources to our 
					   <b>Performance Dashboard</b> project. This task could be assigned to a new database administer or else to existing personnel. 
					   My solution was to create an <b>ETL module</b> demoed in this video which could be operated by any junior staff. 
					   This ETL module uploads and <b>verifies the incoming</b> monthly data, and produces <b>error log</b>. After correction, 
					   the data gets uploaded when ready. Therefore this critical task has been done with <b>least cost</b> and dependency on any particular individual. 
					   The <b>process was automated</b> allowing ETL to take place <b>under an hour instead of few days</b>. This module in MS Access updates SQL Server linked tables.
					</div><!-- <div class="workDescription">-->
					<br/><br/>
					<video height="28" controls data-height="300">
						<source src="./resources/KaiserDatauploadETL.mp4" type="video/mp4">
							Your browser does not support HTML5 video.
                    </video><hr>
					
                    <b>2. Data Search, Slice & Dice:</b><br/>
					This video is an overview of data slice and dice search I have successfully used on many of my database applications. In this method, users start search without any hierarchy constraints starting with any criteria in mind...
					<br/><br/>
					<a id="DSDS"></a>
					<video height="28" controls data-height="300">
						<source src="./resources/1_OverView_Feb26.mp4" type="video/mp4">
						Your browser does not support HTML5 video.
					</video><hr>
					
					<b>3. Data Slice & Dice System (DSDS):</b><br/>
					 At a meeting about the design of a Y2K project for <b>Union Bank</b>, the heads of various departments wanted a proposed hierarchical search to start with different criteria. Some wanted the search to start with social security number while the others wanted to start with account number or last name. 
                     The idea behind DSDS that I had developed at an earlier time was my solution here to satisfy all of their requests. With this system, users were able to start their search with no hierarchy constraint; they were able to start their search with their own preferred criteria. In this video, the same technique is applied to the Northwind database to illustrate its use.
					<br/><br/>
					<video height="28" controls data-height="300">
					<source src="./resources/2_DataSearchFeb24.mp4" type="video/mp4">
					Your browser does not support HTML5 video.
					</video><hr>
					
					<b>4. ExxonMobil Overtime Reporting Application (EMORA), 2005:</b><br/>
					The main focus of this application was to conduct a <b>parametric study</b> of excessive overtime. This monthly effort took about 2 weeks each month
					and required a number of meetings with personnel from various departments to come up with some explanations. 
					The process was very arduous and never produced a satisfactory resolution. The application demoed in this video <b>reduced the two-week effort to under 10 minutes</b>.
					The interactive forms and reports in this application <b>produced a very clear and precise actionable</b> picture. 
					The office manager was able to take corrective action first day of the month without any additional delay. 
					<br/><br/>
					<video height="28" controls data-height="300">
					<source src="./resources/4_DataAnalysis.mp4" type="video/mp4">
					Your browser does not support HTML5 video.
					</video><hr>
					<a id="ExxonMobil"></a>

                </div><!-- xxx ">-->
                <div class="skillsDescription">
                    <span>  </span>
                </div><!-- xxx ">-->

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

                <div class="date"><!-- * * * * * * * * * * * SWAPE * * * * * * * * * * * -->
                          
                </div><!-- xxx ">--> 
                <div class="companyCity"> 
                    <div class="company">     </div> 
                    <div class="city">     </div> 
                    <div class="workDescription">
						  
					</div>
					
                </div><!-- xxx ">-->

                 <div class="date"><!-- * * * * * * * * * * * Kaiser Permanente Performance Dashboard * * * * * * * * * * * -->
                          
                </div><!-- xxx ">--> 



</div>

Open in new window

LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

KimputerCommented:
No x button. Just the escape key and the play (in this case pause) button on the video slider

	<script>
$(function() {
  $('video').on('play', function (e) {
    // IGNORE PLAY EVENT IF ALREADY RESIZED
    if ($(this).data('oldheight') > 0) return;
  
    // SAVE THE CURRENT HEIGHT
    $(this).data('oldheight', $(this).height());
  
    // GET THE NEW HEIGHT DEFAULT TO 400 IF NOT SET
    var newheight = $(this).data('height') || 400;
  
    // SET THE NEW HEIGHT
    $(this).css({height: newheight + 'px'});
  });
  
  $('video').on('ended', function (e) {
     var element = $(this);
     setTimeout(function() {
       // GET THE OLD HEIGHT DEFAULT TO 100 IF NOT SET
       var oldheight = element.data('oldheight') || 100;
		
       // SET THE DEFAULT HEIGHT
       element.css({height: oldheight + 'px'});
	  
       // RESTORE THE FULL HEIGHT VALUE
       element.data('oldheight', 0);
     }, 10);
  });
  
  $('video').on('pause', function (e) {
     var element = $(this);
     setTimeout(function() {
       // GET THE OLD HEIGHT DEFAULT TO 100 IF NOT SET
       var oldheight = element.data('oldheight') || 100;
		
       // SET THE DEFAULT HEIGHT
       element.css({height: oldheight + 'px'});
	  
       // RESTORE THE FULL HEIGHT VALUE
       element.data('oldheight', 0);
     }, 10);
  });
  
  $(document).keyup(function(e) {
     if (e.keyCode == 27) {

      var element = $('video');
	
	for(var i = 0; i < element.length; i++){
		element[i].pause();
	}
  
     setTimeout(function() {
       // GET THE OLD HEIGHT DEFAULT TO 100 IF NOT SET
       var oldheight = element.data('oldheight') || 100;
		
       // SET THE DEFAULT HEIGHT
       element.css({height: oldheight + 'px'});
	  
       // RESTORE THE FULL HEIGHT VALUE
       element.data('oldheight', 0);
     }, 10);
	
	 
    }
});



});
</script>

Open in new window

Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Kimputer,

Esc Key: This is already in use (working). But esc key is not present in iPhone or similar devices.

Other than esc key, when it reaches the end (video finishes), as it is, it exists.

What does your changes to the code do?

Mike
KimputerCommented:
Pressing the play button (or now Pause, because the video is running), will minimize it.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Mike EghtebasDatabase and Application DeveloperAuthor Commented:
What if a user pauses for a second but intends to continue watching? Here pause acts like close and exit.

Is it possible to have exit button of some sort?
KimputerCommented:
The user can press play like he did before, it will continue at the same timestamp he pressed pause.
Slick812Commented:
Question - Is it possible to have exit button of some sort?
Answer "Yes"

First try and add a <span> directly BEFORE the <video>
<span class="killVid">X</span><video height="28" controls data-height="300">
  <source src="./resources/KaiserDatauploadETL.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video><hr>

Open in new window


now add the CSS for this class of  "killVid"
<style>
.killVid{
  position: relative;
  left: 10px; 
  float:left;
  font-size:18px;
  cursor:pointer;
  background: #c00;
  color: white;
  padding:0 4px;
  font-family: sans-serif;
  font-weight: bold;
  border-radius:9px;
}
</style>

Open in new window

If this looks like a correctly positioned "X Kill Button", then we'll move on to the javascript
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
@Slick812,

This image shows both html and render page: DataUpload
Your code:
<span class="killVid">X</span>
	<video height="28" controls data-height="300">
	<source src="./resources/KaiserDatauploadETL.mp4" type="video/mp4">
		Your browser does not support HTML5 video.
</video>

Open in new window


This solution has <video></video> block thus replaces "Data Upload" link with video box messing up the page.

I suppose this work need to be done in javascript code in the submitted page in the original post. If you could handle this issue, you also have solution for http://www.experts-exchange.com/questions/28741322/one-validation-error.html
Slick812Commented:
Sorry, I can NOT understand, what you may be trying to say for me to CODE something, in your code on this page you do not have -

<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>

So that <a> link is not for this question, it's in the "one validation error" question, you never talked to me, but talked to "Julian,"  and your last post on that other question, was something That I did not understand.

you say -
"This solution has <video></video> block thus replaces "Data Upload" link with video box messing up the page."

Of course, because I used to code in this page question , NOT the code in the other.

If I can not have some Idea of your code and problem, then I am not of any use, sorry I posted here.
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
my apology, I had a wrong html. Please see this one:
<!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">&nbsp;
			<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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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>
						-->
						<span class="killVid">X</span>
						<video height="28" controls data-height="300">
							<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


see line 265
Vimal DMSenior Software EngineerCommented:
Hi,

The below URL may help you to use the video on POPUs and close it.

http://www.sitepoint.com/14-jquery-modal-dialog-boxes/
Slick812Commented:
OK, I read through some of your code in comment ID: 41039054 , you say - "see line 265"
that 265 line of -
    <source src="./resources/KaiserDatauploadETL.mp4" type="video/mp4">
is completely wrong, incorrect, and should NOT BE THERE. Why is that line there? What reason do you have for placing a <source> tag in the container of the <div class="workDescription">  which does NOT recognize the <source> tag?

More to the point of this question - "How can I add x-button to exit video play", I do not understand how or why a line that has a <source> tag, can be of any relation or code problem to a "x-button to exit".

Please look at the html code for the killVid X span (button), which is -
     <span class="killVid">X</span>

and the CSS for that -

.killVid{
  position: relative;
  left: 10px;
  float:left;
  font-size: 18px;
  cursor: pointer;
  background: #c00;
  color: white;
  padding: 0 4px;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 9px;
}

This code has is NOT just for a <video> tag, this just makes a red oval display with a white X on it, to look like a red x-button to exit. I can place this code in different places in the HTML structures (div, p, and other), , , to produce a red x-button to exit in the page position where the  <span class="killVid">X</span>   is on that page.

Can you please tell more about what you are doing here for your display output. I can not even tell what your page display "GOAL" may be, , and what you are wanting as a way to display your mp4 videos. you code it with the link to do a pop up as -
<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>

and then you comment that link code OUT, and just copy and paste my code in -
<span class="killVid">X</span>
<video height="28" controls data-height="300">
  <source src="./resources/KaiserDatauploadETL.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

But it looks like my code is not what you may need to get to your "GOAL" of how you want the page to work when you finish it? ?
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Slick812,

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.

But, wit iPhone for example, where there is no escape key, user cannot exit the video on demand.

Question: How can I have an -button to close a running video?
XbuttonToCloseVideo
<!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">&nbsp;
			<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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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>
						<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

Mike EghtebasDatabase and Application DeveloperAuthor Commented:
@Vimal DM,

Tank you for the comment. First, I will try to find a solution with the existing code. If I couldn't, then I will pursue a solution like yours.

Thanks.
Slick812Commented:
First, you still have this line in your code -
     <source src="./resources/KaiserDatauploadETL.mp4" type="video/mp4">

I have told you every way I know how, to DELETE that line, take it out, ,the <source> tag CAN NOT BE USED THERE!  Why do you have it there? ?


in the javascript you have this code -
       vbox.append($('<a/>').addClass('close'));
which is suppose to place a "CLOSE" icon or button with an X  on that overlay video. Do you understand that JQuery javascript line? you need to ADD text to that <a> link, an X, you can look this up to see how JQuery works, but this may or may not help
    vbox.append($('<a/>').attr('href','#').addClass('close').html('X'));

Just for technical correctness, you SHOULD never have more than one JQUERY framework version loaded, you have TWO in your code -
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

   <script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

get rid of the second one (delete it) and change the first one to -
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

not that it matters, but the videos do NOT PLAY for me in firefox, , you may want to consider a more tested and better working modal POP UP, some that are in the link that was given above by  Vimal DM.

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:
@Slick812,

I am sorry to see you are so upset. Because there were too much confusion about what I am looking for, at #41040590 I started by stating what I have and what I want to accomplish.

I will close this question now. Maybe someone else who is not uptight could give me some assistance to move forward. I will post a new question on this later.

Thanks,

Mike
Slick812Commented:
sorry, I am not upset at all, just making an expression about your code to get you to change it, ,  and start looking at the code you use and try to see how it works and what to do to change it. . . . . Me and others in your questions, have made suggestions for code work, but you do not seem to give your reply statements and code changes to try and attempt to understand and use the suggestions. I tried to be more expressive to draw your attention, but that also did not work.
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
JavaScript

From novice to tech pro — start learning today.