JWPlayer Demo

HTML

<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/external/popcorn/popcorn.js"></script>
<link rel="stylesheet" href="http://publishing.ramp.com/FileResource/widgets/metaplayer3/build/mp2/theme.mp2.css">
<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/external/jquery/jquery.iecors.js"></script>
<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/build/metaplayer-complete.js"></script>
<script src="https://embed-ssl.wistia.com/deliveries/9b0ed3b4fd7a2eb3049b51cd26b48b9c0300e7b9.bin?disposition=attachment&amp;filename=jwplayer6.10.js"></script>
<!DOCTYPE HTML>
<html>
	<head>
		<title>
			JW Player Reponsive Video
		</title>
		<script type="text/javascript" src="//cdn.jsdelivr.net/jwplayer/5.10/jwplayer.js">
		</script>
		<style type="text/css">
			html, body {
				height: 100%;
				width: 100%;
				padding: 0;
				margin: 0;
			}
			#player {
				height: 100%;
				width: 100%; 
				padding: 0;
			}
		</style>
	</head>
	<body>
	<div id="player">
	</div>
		<script type="text/javascript">
			jwplayer("player").setup({
				file: "http://link.theplatform.com/s/flac/80Wqf2qD7W5V?mbr=true&feed=FoxPlay%20Live%20Events&manifest=M3U&auth=lZ4PzsEq7QN8IlnWAxo20eCAcFCgoHBm&manifest=m3u8?iptvgratis?chile.m3u8",
				image: "http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg",
				height: "100%",
				width: "100%",
				stretching: "exactfit",
				flashplayer:"//cdn.jsdelivr.net/jwplayer/5.10/player.swf"
			});
		</script>
	</body>
</html>

CSS

h3 {
    color: #101010;
    font-family: Helvetica, Arial, sans-serif;
    margin: 20px;
    font-size: 20px;
}

.container {
    position: relative;
}

.metaplayer {
    width: 600px;
    height: 300px;
    outline: 1px solid red;
}

#transcript {
    margin-top: 10px;
    outline: 1px solid black;
    width: 600px;
    height: 100px;
}

#searchbar {
    outline: 1px solid black;
    width: 600px;
}