You Tube Player - YTPlayer - Demo

by bizamajig

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>
<!-- Note this script should be included AFTER the onYouTubePlayerAPIReady function is defined
     and all the other scripts, including jQuery,metaplayer-complete, etc should be included BEFORE 
     onYouTubePlayerAPIReady is defined -->
<script src="http://www.youtube.com/player_api" type="text/javascript"></script>

<h3>YouTube MetaPlayer V3 UI</h3>

<div class="container">
    <div class="metaplayer">
        <div id="target" style=""></div>
    </div>
    <div id='searchbar'></div>
    <div id='transcript'></div>
</div>

CSS

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

.container {
    position: relative;
}
#target {
    width: 600px;
    height: 300px;
    background: #333;
}
#transcript {
    margin-top: 10px;
    outline: 1px solid black;
    width: 600px;
    height: 100px;
}
#searchbar {
    outline: 1px solid black;
    width: 600px;
}

JavaScript

var video, yt, player;

 function onYouTubePlayerAPIReady() {

     yt = new YT.Player('target', {
         playerVars: {
             wmode: "opaque",
             autoplay: 1,
             controls: 0,
             showInfo: 0,
             rel: 0
         }
     });

     video = MetaPlayer.youtube(yt);

     player = MetaPlayer(video)
         .controlbar({
         fullscreen: true
     })
         .captionconfig()
         .transcript("#transcript")
         .searchbar("#searchbar")
         .srt()
         .ramp("//api.ramp.com/v1/mp2/playlist?e=54002728&apikey=107f70b951a36e10b40ccdd16cd6aaf2")
         .load();

     player.video.autoplay = true;

 }