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>
  <title></title>
    <script type="text/javascript" src="https://embed-ssl.wistia.com/deliveries/9b0ed3b4fd7a2eb3049b51cd26b48b9c0300e7b9.bin?disposition=attachment&filename=jwplayer6.10.js"></script>
    <script type="text/javascript">jwplayer.key = "2U/m9jOYEC49U1j3cNoou7IjxvGS5j03XTpetE5wCVBAwRqhG9pSYWQIMW0=";</script>




<div id="container">&nbsp;</div>
<script type="text/javascript">
jwplayer("container").setup({
  image: "http://content.jwplatform.com/thumbs/3XnJSIm4-640.jpg",
  file: "http://content.jwplatform.com/videos/3XnJSIm4-kNspJqnJ.mp4",
  tracks: [{ 
    file: 'http://content.jwplatform.com/tracks/2UEDrDhv.txt', 
    label: 'English', 
    kind: 'captions',
    'default':true
  }],
  width: 640,
  height: 270,
  captions: {
    color: '#FF0000',
    fontsize: 20,
    backgroundOpacity: 50
  }
});
</script>

CSS

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

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