<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Fouad Hajji Official Website</title>
		<META NAME="description" CONTENT="Fouad Hajji, Multilingual Professional Actor">
		<META NAME="keywords" CONTENT="fouad hajji,hajji fouad,fouad, hajji, actor, acteur"> 
		<meta charset="utf-8">
		<style type="text/css">
			body {
				background:#000;
				padding:0;
				margin:0;
				overflow:hidden;
				width:100%;
				height:100%;
				font-family:sans-serif;
				font-size:10px;
				color: #666;
			}
			
			#video-wrap {
				
				position: fixed;   
				top: 50%;   
				left: 50%;   
				height: 272px;   
				margin-top: -136px;   
				width: 640px;   
				margin-left: -320px;


			}
			
			video {
				border:5px solid rgba(30,30,30,0.7);
				-webkit-border-radius:3px;
				position:relative;
				z-index:3;
				font-size:12px;
			}
			
			canvas.ambilight-left,
			canvas.ambilight-right {
				position:absolute;
				width:300px;
				height:200%;
				top:-50%;
			}
			
			canvas.ambilight-left {
				left:-270px;
				top:-53%;
				background-image:url(mask3-left.png);
			}
			
			canvas.ambilight-right {
				right:-270px;
				top:-51%;
				background-image:url(mask3-right.png);
			}
			
			#copyright {
				text-align:center;
			}
			
			#copyright a {
				color: #eee;
			}
#button {
background:black;
color:gray;
font-size: 10px;
margin-left: 30px;
height:2em;
width:2em;
padding:0;
border:none;
}

#button1 {
background: black;
color:grey;
font-size: 10px;
height:2em;
width:2em;
padding:0;
border:none;

}

#button2 {
background:black;
padding:0;
border:none;

}



		</style>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" src="ambilight.js"></script>
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "mobile/index.html";}
</script>
	</head>
	<body>
		<div id="video-wrap" font-size="0">
			<video id="example" height="272" width="640" autoplay autobuffer="true">
				<source src="demo2.mp4" type="video/mp4" />
				<source src="demo2.webm" type="video/webm" />
				<source src="demo2.ogv" type="video/ogg" />
  				<object type="application/x-shockwave-flash" data="demo2.swf" width="640" height="272">
    					<param name="allowfullscreen" value="false">
    					<param name="allowscriptaccess" value="always">
    					<param name="flashvars" value="file=demo2.flv">
				</object>
				<p>Your browser doesn’t support the intro video. Click 'enter' to enter to the website.</p>
			</video>
<div align="center"><br>
		<button type="image" id="button1" onclick="document.getElementById('example').play()"><img src="play.png" height="20px" width="20px" /></button>&nbsp;
		<button type="image" id="button1" onclick="document.getElementById('example').pause()"><img src="pause.png" height="20px" width="20px" /></button>&nbsp;  
		<button type="image" id="button2" onclick="window.location.href = '../home.html'"><img src="enter.png" height="25px" width="55px" /></button>&nbsp;&nbsp;		
		<button type="image" id="button1" onclick="document.getElementById('example').muted=false"><img src="sound.png" height="20px" width="20px" /></button>&nbsp; 		
		<button type="image" id="button1" onclick="document.getElementById('example').muted=true"><img src="mute.png" height="20px" width="20px" /></button>
</div>		
</div>
		
		<script type="text/javascript">
			ambiLight.create(document.getElementById('example'))
		</script>
		

		
	</body>
</html>