enable HTML5 fallback for non-flash enabled browsers and fix transparency issue in flash

video.html

+
 <div class="video-wrapper">
   <div id="ytapiplayer">
-    <p>You need Flash player 8+ and JavaScript enabled to view this video.</p>
   </div>
-
+  
+  <!-- TODO(Ernie/Kyle) move styles to css -->
+  <iframe id="html5_player" type="text/html" width="640" height="390" style="display:none;" frameborder="0">
+  </iframe>
+  
   <section class="video-controls">
     <ul>
       <li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
       <li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
     </ul>
 
-    <div id=slider></div>
+    <div id="slider"></div>
     <div id="vidtime">0:00/0:00</div>
     <div id="video_speeds"></div>
   </section>
 </div>
 
+
+
 <ol class="subtitles">
   <li id=stt_n5><div id=std_n7 onclick="title_seek(-7);"></div></li>
   <li id=stt_n4><div id=std_n6 onclick="title_seek(-6);"></div></li>
@@ -34,4 +40,3 @@
   <li id=stt_p6><div id=std_p7 onclick="title_seek( 8);"></div></li>
 </ol>
 
-

video_init.js

 var streams=${ streams }
-
-var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
+var params = { allowScriptAccess: "always", bgcolor: "#cccccc", wmode: "transparent" };
 var atts = { id: "myytplayer" };
-swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
-		   "ytapiplayer", "640", "385", "8", null, null, params, atts);
+
+// If the user doesn't have flash, use the HTML5 Video instead. YouTube's
+// iFrame API which supports HTML5 is still developmental so it is not default 
+if (swfobject.hasFlashPlayerVersion("10.1")){
+  swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer?wmode=transparent", 
+        "ytapiplayer", "640", "385", "8", null, null, params, atts);  
+} else {
+
+  //end of this URL may need &origin=http://..... once pushed to production to prevent XSS
+  $("#html5_player").attr("src", "http://www.youtube.com/embed/" + streams["1.0"] + "?enablejsapi=1");
+  $("#html5_player").show();
+
+  var tag = document.createElement('script');
+  tag.src = "http://www.youtube.com/player_api";
+  var firstScriptTag = document.getElementsByTagName('script')[0];
+  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+  loadHTML5Video();
+}
 var captions=0;
 $("#slider").slider({slide:function(event,ui){seek_slide('slide',event.originalEvent,ui.value);},
                      stop:function(event,ui){seek_slide('stop',event.originalEvent,ui.value);}});
@@ -17,10 +33,10 @@ ajax_video=good;
 loadNewVideo(streams["1.0"], ${ video_time });
 
 function add_speed(key, stream) {
-    var id = 'speed_' + stream
+    var id = 'speed_' + stream;
     $("#video_speeds").append(' <span id="'+id+'">'+key+'X</span>');
     $("#"+id).click(function(){
-	    change_video_speed(key, stream)
+	    change_video_speed(key, stream);
 	});
 }
 
@@ -41,3 +57,4 @@ l.sort(sort_by_value);
 for(var i=0; i<l.length; i++) {
     add_speed(l[i], streams[l[i]])
 }
+