Video works unless two are played after each other.

oliver_screen/templates/public/index.html

@@ -27,8 +27,8 @@
             $( document ).ready( get_last_track );
             $( document ).ready( get_now_playing );
             /* Start timers updating a screen resource. */
-            $( document ).everyTime('10s', get_last_track );
-            $( document ).everyTime('10s', get_now_playing );
+            $( document ).everyTime('10s', "last_track", get_last_track );
+            $( document ).everyTime('10s', "now_playing", get_now_playing );
 
             /* Ajax spinner */
             $( document ).ajaxStart( function() {

oliver_screen/templates/public/now_playing.html

@@ -1,6 +1,53 @@
 {% if now_playing %}
     {% if now_playing.video %}
-        <iframe src="http://www.youtube.com/embed/{{ now_playing.video.videoId }}?enablejsapi=1" frameborder="0" width="1066px" height="600px" /> 
+        <script type="text/javascript">
+            // Stop the reloading of the now_playing div.
+            $( document ).stopTime("now_playing");
+        </script>
+        <div id="player"></div>
+        <script type="text/javascript">
+          // Loads the IFrame Player API code asynchronously.
+          var tag = document.createElement('script');
+          tag.src = "http://www.youtube.com/player_api";
+          var firstScriptTag = document.getElementsByTagName('script')[0];
+          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+          // Creates an <iframe> (and YouTube player)
+          // after the API code downloads.
+          var player;
+          function onYouTubePlayerAPIReady() {
+            player = new YT.Player('player', {
+              width: '1280',
+              height: '720',
+              videoId: '{{ now_playing.video.videoId }}',
+              playerVars: {
+                controls: 0, // no controls
+                iv_load_policy: 3, // no annotations
+                start: {{ now_playing.video.start }} // offset into video (less out of sync)
+              },
+              // Attach to these events.
+              events: {
+                'onReady': onPlayerReady,
+                'onStateChange': onPlayerStateChange
+              }
+            });
+          }
+
+          // The API will call this function when the video player is ready.
+          function onPlayerReady(event) {
+            event.target.playVideo();
+            event.target.mute();
+            event.target.setPlaybackQuality("hd720");
+          }
+
+          // The API calls this function when the player's state changes.
+          function onPlayerStateChange(event) {
+            if (event.data == YT.PlayerState.ENDED) {
+                // restart timer which reloads the now_playing div.
+                $( document ).everyTime('10s', "now_playing", get_now_playing );
+            }
+          }
+        </script>
     {% else %}
         {% if now_playing.image %}
             <img src="{{ now_playing.image}}" class="now_playing" /><br />

oliver_screen/tracks/admin.py

@@ -8,7 +8,7 @@ class LastFMAdmin(admin.ModelAdmin):
 
 class VideoAdmin(admin.ModelAdmin):
 	fieldsets = [
-		(None, {'fields': ['title','artist', 'videoId', 'start', 'active']})
+		(None, {'fields': ['artist', 'title', 'videoId', 'start', 'active']})
 	]
 
 admin.site.register(LastFMUser, LastFMAdmin)