Example Punndit Embed

punndit_bar_embed_example.html

<!-- 
   This following lines should be placed at the location on your page where you would 
   like the punndit player to appear. 
   
   The data-punn-id attribute should be any value that will uniquely 
   identify the video you are attaching the punndit bar to.  
   
   For example if you were attaching the bar to a YouTube video
   data-punn-id could be set to the URL of the YouTube video.
 -->
<div id="punn-container" class="punndit" data-punn-id="417">
  <div class="pndt-video-screen">
    <div class="pndt-video">
      <!-- This is where your actual player would be shown -->
      <div id="ytplayer"></div>
    </div>
  </div>
</div>

<!-- 
 ************************************************************************** 
 The following block should be placed directly before your ending body tag.
 ************************************************************************** 
 -->
<script type="text/javascript">
  // Defines the class that will be used to idenfity
  // all of the players that the punndit bar will attach to.
  var punndit_container_class = 'punndit';
  // Defines the API key that you received from punndit.com when
  // you created this application.
  var punndit_api_key = 'example-api-key';
  // Defines the punndit API url.
  var punndit_endpoint = 'api.punndit.com/embed/bar.js?key=' + punndit_api_key;
  // An empty array that should always be defined.  If you call any actions
  // on the embeddable bar before all of its requirements are loaded, the call
  // will be added to this queue and then called once the loading has been completed.
  var punndit_queue = [];
  (function() {
    var p = document.createElement('script'); p.type = 'text/javascript'; p.async = true;
    p.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + punndit_endpoint;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(p);
  })();
</script>