Video links now use data attributes and render in an iframe

app/helpers/application_helper.rb

@@ -158,7 +158,7 @@ module ApplicationHelper
     if options[:youtube]
       while youtube = message.match(/youtube\.com::([A-Za-z0-9_\\]+)/)
         videoid = youtube[1]
-        message.gsub!('youtube.com::'+videoid, '<a onclick="openVideo(\'youtube.com\', \'' + videoid + '\', this)" href="#video">Youtube: ' + youtube_title(videoid) + '</a>')
+        message.gsub!('youtube.com::'+videoid, '<a class="video-link" data-host="youtube.com" data-video-id="' + videoid + '" href="#video">Youtube: ' + youtube_title(videoid) + '</a>')
       end
     end
 

public/javascripts/stream.js

@@ -8,7 +8,7 @@ $(document).ready(function(){
   var $stream = $(".stream");
   var $publisher = $("#publisher");
   // expand all comments on page load
-	$(".stream:not('.show')").find('.comments').each(function(index) {
+	$stream.not('.show').find('.comments').each(function(index) {
       var comments = $(this);
 	    if(comments.children("li").length > 1) {
         var show_comments_toggle = comments.closest("li").find(".show_post_comments");
@@ -33,7 +33,7 @@ $(document).ready(function(){
               .closest("form").find(".comment_submit").fadeIn(200);
   });
 
-  $(".stream").delegate("textarea.comment_box", "blur", function(evt){
+  $stream.delegate("textarea.comment_box", "blur", function(evt){
     var commentBox = $(this);
     if( !commentBox.val() ) {
       commentBox.attr("rows", 1)
@@ -51,6 +51,49 @@ $(document).ready(function(){
       box.toggle();
     }
   });
+  
+  $stream.delegate("a.video-link", "click", function(evt) {
+    evt.preventDefault();
+    
+    var $this = $(this),
+      container = document.createElement('div'),
+      $container = $(container).attr("class", "video-container");
+
+    var $videoContainer = $this.siblings("div.video-container");
+    if($videoContainer.length > 0) {
+      $videoContainer.slideUp('fast', function () {
+        $videoContainer.detach();
+      });
+      return;
+    }
+    
+    if($("div.video-container").length > 0) {
+      $("div.video-container").slideUp("fast", function() { 
+        $(this).detach();
+      });
+    }
+      
+    if($this.data("host") === 'youtube.com') {
+	  	$container.html(
+        '<a href="//www.youtube.com/watch?v=' + $this.data("video-id") + '" target="_blank">Watch this video on Youtube</a><br />' +
+        '<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/' + $this.data("video-id")+ '"></iframe>'
+      );
+    } else {
+      $container.html('Invalid videotype <i>'+$this.data("host")+'</i> (ID: '+$this.data("video-id")+')');
+    }
+  
+    
+  
+    $container.hide();
+    this.parentNode.insertBefore(container, this.nextSibling);
+    $container.slideDown('fast');
+    
+    $this.click(function() {
+      $container.slideToggle('fast', function () {
+        $(this).detach();
+      });
+    });
  
+  });
 
   $(".new_status_message").bind('ajax:success', function(data, json, xhr){
     json = $.parseJSON(json); 

public/javascripts/view.js

@@ -3,7 +3,6 @@
 *   the COPYRIGHT file.
 */
 
-
 $(document).ready(function(){
   $('#debug_info').click(function() {
     $('#debug_more').toggle('fast');
@@ -115,28 +114,6 @@ $.fn.clearForm = function() {
   });
 };
 
-var video_active_container = null;
-
-
-function openVideo(type, videoid, link) {
-  var container = document.createElement('div'),
-      $container = $(container);
-  if(type == 'youtube.com') {
-    $container.html('<a href="//www.youtube.com/watch?v='+videoid+'" target="_blank">Watch this video on Youtube</a><br><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/'+videoid+'?fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+videoid+'?fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>');
-  } else {
-    $container.html('Invalid videotype <i>'+type+'</i> (ID: '+videoid+')');
-  }
-  if(video_active_container != null) {
-    video_active_container.parentNode.removeChild(video_active_container);
-  }
-  video_active_container = container;
-  $container.hide();
-  link.parentNode.insertBefore(container, this.nextSibling);
-  $container.slideDown('fast', function() { });
-  link.onclick = function() { $container.slideToggle('fast', function() { } ); }
-  
-  
-}
 
 $(".make_profile_photo").live("click", function(evt){