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/external/jwplayer/jwplayer.js"></script>
<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/build/metaplayer-complete.js"></script>
  <title></title>
    <script type="text/javascript" src="jwplayer/jwplayer.js"></script>
    <script type="text/javascript">jwplayer.key = "2U/m9jOYEC49U1j3cNoou7IjxvGS5j03XTpetE5wCVBAwRqhG9pSYWQIMW0=";</script>




<div id="myElement"></div>

<script>
    jwplayer("myElement").setup({
      playlist: [{
        captions:
          [{file: "https://embed-ssl.wistia.com/deliveries/3e435bf980f0a2d27eb07952ae934597d5df908a.bin?disposition=attachment&filename=Dawn+Of+The+Planet+Of+The+Apes+2014+READNFO+TS+XviD-HELLRAZ0R-spa.srt", 
             label: "Spanish"}],
        file: "http://s2-04-ffae.kinogo.net/a40299da532220e9ae12fc7e9ba8ada1/ram/films/hq2/planeta-obezyan-revolyuciya-2014.flv",
        image: "/uploads/sintel.jpg",
        title: "Amanecer del planeta de los simios",
        description: "movie."
      },{
        captions:
          [{file: "https://embed-ssl.wistia.com/deliveries/fbd948455ddb62fd88642c5adcc4aef4847317d9.bin?disposition=attachment&filename=Hercules.2014.CAM.XviD.SBT.vtt", 
             label: "Spanish"}],
        file: "http://s1-06-hnwq.kinogo.net/fcce4692793ffac045ac6403991cbb09/ram/films/hq2/gerakl-2014.flv",
        image: "/uploads/tears.jpg",
        title: "Hercules 2014",
        description: "movie."
      },{
        captions:
          [{file:...

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