dschool heatmap + video unlock code

gistfile1.html

<!-- BEGIN ASYNC JS LOAD -->
<!-- Put this right before the </head> tag -->
  <script type="text/javascript">
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = 'http://dschool-js.s3.amazonaws.com/widget-embed.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>
<!-- end ASYNC JS LOAD -->



<!-- BEGIN MAP EMBED -->
<!-- The map will be embedded in the div with an ID of "dexp-map-embed" -->
<!-- This happens after the javascript loads via the above async call, so I include a loading indicator image -->
<div id="dexp-map-embed">
  <div id="dexp-map-embed-loading" style="text-align: center;"><img src="http://dschool-js.s3.amazonaws.com/assets/images/ajax-loader.gif"></div>
</div>
<!-- end MAP EMBED -->


<!-- BEGIN VIDEO UNLOCK -->
<div id="dexp-video-unlock" style="text-align: center;">
  <iframe src="http://dschool-js.s3.amazonaws.com/dgift_video_unlock.html" style="border: none; margin: 0 auto; width: 728px; height: 440px;"></iframe>
</div>
<!-- end VIDEO UNLOCK -->

<!-- I used the following styling for both the map embed and video unlock in the demo page. -->
<!-- See http://dthinking.org/demo2.html for what it looks like live. It will probably need to be changed to match the style of the actual dgift page. -->
<style>
  #dexp-map-embed, #dexp-video-unlock {
  background-color: #ccc;
  padding: 10px;
  border: 1px solid #aaa;
  margin: 10px auto 10px auto;
  width: 800px;
}
</style>