Embed Youtube

plugin.css

/* Plugin CSS file */

plugin.js

app.plugins.embedYoutube = function(message) {
  var listener;
    
  var template = _.template(
    "<div>" +
      "<a class=\"\"><i class=\"fa fa-chevron-up <% if (settings.collapsed) { %>hide<% } %>\"></i></a>" + 
      "<a class=\"\"><i class=\"fa fa-chevron-down <% if (!settings.collapsed) { %>hide<% } %>\"></i></a>" + 
    "</div>" +
    "<div class=\"embed <% if (settings.collapsed) { %>hide<% } %>\">" +
      "<iframe width=\"420\" height=\"315\" frameborder=\"0\" allowfullscreen src=\"http://www.youtube.com/embed/<%= video_id %>?rel=0\">" +
      "</iframe>" + 
    "</div>");
  
  // http://stackoverflow.com/questions/2964678/jquery-youtube-url-validation-with-regex/10315969#10315969
  var ytre = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/; 
  var video_id = (message.match(ytre)) ? RegExp.$1 : false;
  
  if(video_id) {
    // Get plugin settings
    var settings = app.plugin_data.embedYoutube.settings;
    message = message + template({video_id: video_id, settings: settings});
    
    // Add listener
    listener = function() {
      var $el = $(this.getDOMNode());
      
      // This will hide or show the content
      $el.find(".fa-chevron-up, .fa-chevron-down").click(function() {
        $el.find(".fa-chevron-up, .fa-chevron-down, .embed").toggleClass("hide");
      });
    }
  }
  
  return {text: message, listener: listener};
}

plugin.json

{
  "name": "Youtube Embedder",
  "author": "David Petersen",
  "description": "Embeds youtube videos posted in a message",
  "pluginId": "embedYoutube",
  "settings": {
    "collapsed": false
  }
}