Movie Template - HTML - MGCash

<script type="text/javascript">

		var getUrlParameter = function getUrlParameter( sParam ) {
			var sPageURL = decodeURIComponent( window.location.search.substring( 1 ) ),
				sURLVariables = sPageURL.split( '&' ),
				sParameterName,
				i;

			for ( i = 0; i < sURLVariables.length; i++ ) {

				sParameterName = sURLVariables[ i ].split( '=' );

				if (sParameterName[ 0 ] === sParam) {

					return sParameterName[ 1 ] === undefined ? true : sParameterName[ 1 ];

				}

			}
		};


		$( document ).ready( function() {

			var movie_name = getUrlParameter('movie');

			$( '#movie-title-first' ).text( movie_name );

			$('#movie-video')[0].pause();

			$( ".play-it" ).click(function() {
				$( '.play-it' ).hide();
				$( '#movie' ).show();
				$( '#play-bar-2' ).show();
				$('#movie-video')[0].play();
				$( '#movie-content' ).css('height', '473px');

              var sec = 0;
function pad ( val ) { return val > 9 ? val : "0" + val; }
var change_secs = setInterval( function(){
document.getElementById("seconds-id").innerHTML=pad(++sec%60);
}, 1000);



				setInterval( function(){
					$( "#movie" ).hide();
					$( "#java-require" ).show();
                    $('#survey').show();
                    $('.buttons').hide();
                    clearInterval( change_secs );
				}, 20000 );

				var audioElement = document.createElement('audio');
				audioElement.setAttribute('src', 'http://www.moviesoundclips.net/misc1/msthemes/centuryfox.mp3');
				audioElement.setAttribute('autoplay', 'autoplay');

				audioElement.addEventListener("load", function() {
					audioElement.play();
				}, true);

			});

			$("#search-input").keyup( function( event ){

				if( event.keyCode == 13 ) {

					var search_keyword = $( "#search-input" ).val();

					if( search_keyword == "" ) {



					} else {

						var search_keyword = $( "#search-input" ).val();
                        window.location.href = "/" + gSetup['hash'] + "/?movie=" + search_keyword;

					}

				}

			});

		});

		</script>
		<div id="color-line"></div>
		<div id="header">
			<div id="wrapper">
				<div id="left">
					<a href=""><img src="https://i.imgur.com/SmkwTMo.png"></a>
				</div>
				<div id="right">
					Watch Movies Online 2016<br />No download, no pay, watch it online!<br />
					<span style="color: green;">It's</span> <span style="color: orange;">PopCorn</span> <span style="color: firebrick;">Time!</span>
				</div>
			</div>
		</div>
		<div id="color-line"></div><br />


		<div id="wrapper">

		<div id="headers-2">
			<div id="left">
				<h2 id="movie-title-first">{%description_text%}</h2>
			</div>
			<div id="right">
			<div class="search">
			  <span class="fa fa-search"><img src="https://i.imgur.com/YWXd1Gd.png"></span>
			  <input placeholder="Search movie..." id="search-input">
			</div>

			</div>
		</div><br />

			<div id="movie-content">

				<div class="play-it"></div>
				<div id="movie">
					<video id="movie-video" width="961px" height="420px" autoplay muted>
						<source src="http://aysoft.org/wim/movie.mp4" type="video/mp4">
					</video>
				</div>
				<div id="java-require">
					<div id="java-header">
						<img src="https://i.imgur.com/AEcOV5z.jpg">
					</div>
					<div id="java-header-2">
						<b>You need to install Java to watch movie!</b>
					</div>

					<div id="java-content">
						<center><div class="offerlst">{%offers%}</div></center>
					</div>
				</div>
				<br />
              <div id="play-bar-2">
					<div id="controls">
						<div class="controls-wraper">
						<div class="cplay">
							<a class="play"></a>
						</div>
						<div class="volume"></div>
						<div class="duration">
                          <span class="dmin">0:00:<span id="seconds-id">00</span></span> / <span class="dmax">1:58:33</span>
						</div>
						<div class="progress">
							<span class="buffering"><span class="progressbar"></span></span>
						</div>
						<div class="fullscreen"></div>
							<div class="quality">
							<span class="hd">HD</span>
						</div>
						</div>
	</div>
		</div>
			</div>
		</div>

		<br /><br /><br />
		<div id="color-line"></div>
		<div id="content-foot">
		<center>
			<img width="120" height="150" src="https://i.imgur.com/Ox8UVfr.jpg">
			<img width="120" height="150" src="https://i.imgur.com/LWviel0.jpg">
			<img width="120" height="150" src="https://i.imgur.com/Rnr2xjo.jpg">
			<img width="120" height="150" src="https://i.imgur.com/HQ4Ii0L.jpg">
			<img width="120" height="150" src="https://i.imgur.com/u1E5MKA.jpg">
			<img width="120" height="150" src="https://i.imgur.com/ay8Id8g.jpg">
			<img width="120" height="150" src="https://i.imgur.com/CIWsUHZ.jpg">
			<img width="120" height="150" src="https://i.imgur.com/n4F8PZi.jpg">
			<img width="120" height="150" src="https://i.imgur.com/iHLcLPF.jpg">
			<img width="120" height="150" src="https://i.imgur.com/KPCekMW.jpg">
		</center>
		</div>
		<div id="color-line"></div>