Untitled

<!DOCTYPE html>
<html>
<head>
	<script
  src="http://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<script>
		window.onload = () => {
			const d = document;
			const video = d.getElementById('video');
			d.getElementById("halden").onclick = (e) => {
				video.setAttribute('src', '../vedlegg/halden.mp4')
				video.load();
				video.play();
			}
			d.getElementById("fredrikstad").onclick = (e) => {
				video.setAttribute('src', '../vedlegg/fredrikstad.mp4')
				video.load();
				video.play();
			}
			$('#presentasjon').on('hidden.bs.modal', () => {
				video.pause()
			})
		}


	</script>
</head>
<body>
	<div class="container-fluid">
		<img id="kart" src="../vedlegg/stortkartostfold.gif">
		<div class="markers">
			<a data-toggle="modal" data-target="#presentasjon" src="../vedlegg/marker.png"><img src="../vedlegg/marker.png" id="fredrikstad"></a>
			<a data-toggle="modal" data-target="#presentasjon" src="../vedlegg/marker.png"><img src="../vedlegg/marker.png" id="halden"></a>
		</div>
	</div>

	<div id="presentasjon" class="modal fade" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h3>Videopresentasjon</h3>
				<a href="#" data-dismiss="modal">x</a>
			</div>
			<div class="modal-body">
				<video id="video" width="320" height="240" controls>
					<source src="" type="video/mp4">
							Nettleseren din stötter ikke vidoer i browser.
						</video>
			</div>
			<div class="modal-footer">
				<a href="#" data-dismiss="modal">Lukk</a>
			</div>
		</div>
	</div>
</div>

<style>
body {
	margin: 0px;
	padding: 0px;
}
div.markers {
	width: 500px;
	position: absolute;
	top: 200px;
	left: 10px;
}
#video {
	height:100%;
	width:100%;
}
#fredrikstad {
	position: absolute;
	right:10px;
	z-index:2;
	right:365px;
	top:180px;
	width:10%;
	cursor:pointer;
}
#halden {
	position: absolute;
	z-index:2;
	right:70px;
	top:295px;
	width:10%;
	cursor:pointer;
}
#kart {
	position: relative;
	z-index:1;
}
</style>
</body>
</html>