Reward users for watching YouTube videos on your site

We’ve been asked a number of times about how to use the PunchTab SDK to reward-enable video views. Here’s a quick and dirty tutorial video (from our retro “found footage” archive) that shows one way to do it. Some useful code and a few notes are also included below. In the future you’ll see automated widgets from us that non-developers can use as well.

A live demo can be found here: http://www.hitvu.com/yt

Notes:

1. Link to the Chromeless YouTube Player example used for this tutorial:
http://code.google.com/apis/youtube/chromeless_example_1.html
2. The player that we used is bare-bones. You can add different controls and customize the UI by referring to the Chromeless YouTube Player example.
3. This tutorial only rewards the viewer for their first video view of the day.

Code:

...
  <head>
    <!-- Use the Google AJAX Libraries API:
        http://code.google.com/apis/ajaxlibs/ -->
    <script src="//www.google.com/jsapi"></script>
    <script>
      google.load("swfobject", "2.1");
    </script>
    <script type="text/javascript">
        function onYouTubePlayerReady(playerId) {
          ytplayer = document.getElementById("myytplayer");
        }
        function loadNewVideo(id, startSeconds) {
          if (ytplayer) {
            ytplayer.loadVideoById(id, parseInt(startSeconds));
          }
        }
	function thanks() {
	  _ptq.push(["watch",{'points':100}]);
	}
        function play() {
	  loadNewVideo("nUoP0lMW1fw",0); // replace with your video id
	  setTimeout(thanks, 5000);     // 10 seconds before giving 100 pts
          if (ytplayer) {
            ytplayer.playVideo();
          }
        }
    </script>
  </head>
...
  <body>
...
    <a href="javascript:void(0);" onclick="play();">Play</a> <br>
    <!-- embed the player -->
    <div id="ytapiplayer">
      You need Flash player 8+ and JavaScript enabled to view this video.
    </div>
    <script type="text/javascript">
      // <![CDATA[

      // allowScriptAccess must be set to allow the Javascript from one 
      // domain to access the swf on the youtube domain
      var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
      // this sets the id of the object or embed tag to 'myytplayer'.
      // You then use this id to access the swf and make calls to the player's API
      var atts = { id: "myytplayer" };
      swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
                         "ytapiplayer", "400", "300", "8", null, null, params, atts);
      //]]>
    </script>
...
    <!-- PunchTab code --!>
...
  </body>