added overlayed "play" icon to thumb,

made the "loader" gif background for oembed container
make videos autoplay after click

public/javascripts/app/templates/status-message.handlebars

@@ -19,9 +19,13 @@
   {{#if o_embed_cache}}
   <div class="oembed">
     {{#if o_embed_cache.data.thumbnail_url}}
-    <img src="{{o_embed_cache.data.thumbnail_url}}" class="thumb" />
+    <div class="thumb">
-    {{/if}}
+      <img src="{{o_embed_cache.data.thumbnail_url}}" />
+      <div class="video-overlay"></div>
+    </div>
+    {{else}}
     {{{o_embed_html}}}
+    {{/if}}
   </div>
   {{/if}}
 </div>

public/javascripts/app/views/content_view.js

@@ -1,20 +1,25 @@
 app.views.Content = app.views.StreamObject.extend({
+
+  events: {
+    "click .oembed .thumb": "showOembedContent"
+  },
+  
   presenter : function(){
     return _.extend(this.defaultPresenter(), {
       text : app.helpers.textFormatter(this.model),
-      o_embed_html : embedHTML(this.model),
+      o_embed_html : this.embedHTML(),
       largePhoto : this.largePhoto(),
       smallPhotos : this.smallPhotos()
-    })
+    });
+  },
 
-    function embedHTML(model){
+  embedHTML: function(){
-      if(!model.get("o_embed_cache")) { return ""; }
+    if(!this.model.get("o_embed_cache")) { return ""; }
-      var data = model.get("o_embed_cache").data;
+    var data = this.model.get("o_embed_cache").data;
-      if(data.type == "photo") {
+    if(data.type == "photo") {
-        return '<img src="'+data.url+'" width="'+data.width+'" height="'+data.height+'" />';
+      return '<img src="'+data.url+'" width="'+data.width+'" height="'+data.height+'" />';
-      } else {
+    } else {
-        return data.html || ""
+      return data.html || ""
-      }
     }
   },
 
@@ -28,6 +33,14 @@ app.views.Content = app.views.StreamObject.extend({
     var photos = this.model.get("photos")
     if(!photos || photos.length < 2) { return }
     return photos.slice(1,8)
+  },
+
+  showOembedContent: function() {
+    var oembed = $(this.el).find(".oembed");
+    var embedHTML = $( this.embedHTML() );
+    var paramSeparator = ( /\\?/.test(embedHTML.attr("href")) ) ? "&" : "?";
+    embedHTML.attr("src", embedHTML.attr("src") + paramSeparator + "autoplay=1");
+    oembed.html( embedHTML );
   }
 })
 

public/javascripts/app/views/stream_view.js

@@ -61,12 +61,8 @@ app.views.Stream = Backbone.View.extend({
           oembed = elem.find('.oembed'),
           thumb  = oembed.find('.thumb');
 
-      if( thumb.length > 0 && oembed.is(':visible') ) {
+      if( thumb.length > 0 /*&& oembed.is(':visible')*/ ) {
-        thumb.click(function(){
+        thumb.show();
-          oembed.find('*').toggle();
-          $(this).hide();
-        });
-        oembed.find('*').toggle();
       } 
     });
   },

public/stylesheets/sass/application.sass

@@ -1828,9 +1828,21 @@ ul#press_logos
     :color #777
 
   .collapsible
-    .oembed .thumb
+    .oembed
-      :display none
+      :background url('/images/ajax-loader2.gif') no-repeat center center
-      :cursor pointer
+
+      .thumb
+        :position relative
+        :display none
+        :cursor pointer
+
+        .video-overlay
+          :background url('/images/video-overlay.png') no-repeat center center
+          :position absolute
+          :top 0
+          :left 0
+          :right 0
+          :bottom 0
 
 .conversation_participants
   :z-index 3