Finishes embed component

src/definitions/modules/embed.js

@@ -63,6 +63,7 @@ $.fn.embed = function(parameters) {
 
         initialize: function() {
           module.debug('Initializing embed');
+          module.determine.autoplay();
           module.create();
           module.bind.events();
           module.instantiate();
@@ -94,7 +95,7 @@ $.fn.embed = function(parameters) {
 
         bind: {
           events: function() {
-            if( module.is.video() ) {
+            if( module.has.placeholder() ) {
               module.debug('Adding placeholder events');
               $module
                 .on('click' + eventNamespace, selector.placeholder, module.createAndShow)
@@ -135,6 +136,7 @@ $.fn.embed = function(parameters) {
             .html( module.generate.embed(url) )
             .appendTo($module)
           ;
+          settings.onCreate.call(element, url);
           module.debug('Creating embed object', $embed);
         },
 
@@ -152,7 +154,6 @@ $.fn.embed = function(parameters) {
             .data(metadata.url, url)
           ;
           module.create();
-          settings.onChange.call(element);
         },
 
         // clears embed
@@ -223,6 +224,11 @@ $.fn.embed = function(parameters) {
         },
 
         determine: {
+          autoplay: function() {
+            if(module.should.autoplay()) {
+              settings.autoplay = true;
+            }
+          },
           source: function(url) {
             var
               matchedSource = false
@@ -313,13 +319,13 @@ $.fn.embed = function(parameters) {
           },
           parameters: function(source, extraParameters) {
             var
-              sourceParameters = (sources[source].parameters !== undefined)
+              parameters = (sources[source] && sources[source].parameters !== undefined)
                 ? sources[source].parameters(settings)
-                : {},
-              parameters
+                : {}
             ;
+            extraParameters = extraParameters || settings.parameters;
             if(extraParameters) {
-              parameters = $.extend({}, sourceParameters, extraParameters);
+              parameters = $.extend({}, parameters, extraParameters);
             }
             parameters = settings.onEmbed(parameters);
             return module.encode.parameters(parameters);
@@ -332,13 +338,16 @@ $.fn.embed = function(parameters) {
           }
         },
 
-        is: {
+        should: {
           autoplay: function() {
             return (settings.autoplay === 'auto')
-              ? ($module.data('image') !== undefined)
+              ? (settings.placeholder || $module.data(metadata.placeholder) !== undefined)
               : settings.autoplay
             ;
-          },
+          }
+        },
+
+        is: {
           video: function() {
             return module.get.type() == 'video';
           }
@@ -538,30 +547,22 @@ $.fn.embed.settings = {
   id       : false,
 
   // standard video settings
-  autoplay : 'auto',
-  color    : '#444444',
-  hd       : true,
-  showUI   : false,
+  autoplay  : 'auto',
+  color     : '#444444',
+  hd        : true,
+  brandedUI : false,
+
+  // additional parameters to include with the embed
+  parameters: false,
 
   onDisplay            : function() {},
   onPlaceholderDisplay : function() {},
   onReset              : function() {},
-  onChange             : function() {},
+  onCreate             : function(url) {},
   onEmbed              : function(parameters) {
     return parameters;
   },
 
-  width    : 'auto',
-  height   : 'auto',
-
-  // additional parameters to include with the embed
-  parameters: false,
-
-  // callbacks not coded yet (needs to use jsapi)
-  api      : true,
-  onPause  : function() {},
-  onStop   : function() {},
-
   metadata    : {
     id          : 'id',
     icon        : 'icon',
@@ -584,67 +585,75 @@ $.fn.embed.settings = {
     embed       : '.embed',
     placeholder : '.placeholder',
     play        : '.play'
-  }
-};
+  },
 
-$.fn.embed.settings.sources = {
-  youtube: {
-    name   : 'youtube',
-    type   : 'video',
-    icon   : 'video play',
-    domain : 'youtube.com',
-    url    : '//www.youtube.com/embed/{id}',
-    parameters: function(settings) {
-      return {
-        autohide       : !settings.showUI,
-        autoplay       : settings.autoplay,
-        color          : settings.colors || undefined,
-        hq             : settings.hd,
-        jsapi          : settings.api,
-        modestbranding : 1
-      };
+  sources: {
+    youtube: {
+      name   : 'youtube',
+      type   : 'video',
+      icon   : 'video play',
+      domain : 'youtube.com',
+      url    : '//www.youtube.com/embed/{id}',
+      parameters: function(settings) {
+        return {
+          autohide       : !settings.brandedUI,
+          autoplay       : settings.autoplay,
+          color          : settings.colors || undefined,
+          hq             : settings.hd,
+          jsapi          : settings.api,
+          modestbranding : !settings.brandedUI
+        };
+      }
+    },
+    vimeo: {
+      name   : 'vimeo',
+      type   : 'video',
+      icon   : 'video play',
+      domain : 'vimeo.com',
+      url    : '//www.youtube.com/embed/{id}',
+      parameters: function(settings) {
+        return {
+          api      : settings.api,
+          autoplay : settings.autoplay,
+          byline   : settings.brandedUI,
+          color    : settings.colors || undefined,
+          portrait : settings.brandedUI,
+          title    : settings.brandedUI
+        };
+      }
     }
   },
-  vimeo: {
-    name   : 'vimeo',
-    type   : 'video',
-    icon   : 'video play',
-    domain : 'vimeo.com',
-    url    : '//www.youtube.com/embed/{id}',
-    parameters: function(settings) {
-      return {
-        api      : settings.api,
-        autoplay : settings.autoplay,
-        byline   : settings.showUI,
-        color    : settings.colors || undefined,
-        portrait : settings.showUI,
-        title    : settings.showUI
-      };
-    }
-  }
-};
 
-$.fn.embed.settings.templates = {
-  iframe : function(url, parameters) {
-    return ''
-      + '<iframe src="' + url + '?=' + parameters + '"'
-      + ' width="100%" height="100%"'
-      + ' frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
-    ;
-  },
-  placeholder : function(image, icon) {
-    var
-      html = ''
-    ;
-    if(icon) {
-      html += '<i class="' + icon + ' icon"></i>';
-    }
-    if(image) {
-      html += '<img class="placeholder" src="' + image + '">';
+  templates: {
+    iframe : function(url, parameters) {
+      return ''
+        + '<iframe src="' + url + '?=' + parameters + '"'
+        + ' width="100%" height="100%"'
+        + ' frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
+      ;
+    },
+    placeholder : function(image, icon) {
+      var
+        html = ''
+      ;
+      if(icon) {
+        html += '<i class="' + icon + ' icon"></i>';
+      }
+      if(image) {
+        html += '<img class="placeholder" src="' + image + '">';
+      }
+      return html;
     }
-    return html;
-  }
+  },
+
+  // NOT YET IMPLEMENTED
+  api     : true,
+  onPause : function() {},
+  onPlay  : function() {},
+  onStop  : function() {}
+
 };
 
 
+
 })( jQuery, window , document );

src/definitions/modules/embed.less

@@ -65,6 +65,7 @@
 /* Placeholder Image */
 .ui.embed > .placeholder {
   position: absolute;
+  cursor: pointer;
   top: 0px;
   left: 0px;
   display: block;
@@ -85,11 +86,25 @@
   left: 0px;
   width: 100%;
   height: 100%;
+  z-index: 2;
+}
+.ui.embed > .icon:after {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  z-index: 3;
+  content: '';
+  background: @placeholderBackground;
+  opacity: @placeholderBackgroundOpacity;
+  transition: @placeholderBackgroundTransition;
 }
 .ui.embed > .icon:before {
   position: absolute;
   top: 50%;
   left: 50%;
+  z-index: 4;
   transform: translateX(-50%) translateY(-50%);
 
   color: @iconColor;
@@ -107,8 +122,9 @@
      Hover
 ---------------*/
 
-.ui.embed .icon:hover {
-  background: @hoverIconBackground;
+.ui.embed .icon:hover:after {
+  background: @hoverPlaceholderBackground;
+  opacity: @hoverPlaceholderBackgroundOpacity;
 }
 .ui.embed .icon:hover:before {
   color: @hoverIconColor;

src/themes/default/modules/embed.variables

@@ -8,23 +8,37 @@
 
 /* Simple */
 @background: @lightGrey;
+@transitionDuration: 0.5s;
+@transitionEasing: @defaultEasing;
 
 /* Placeholder */
-@placeholderBackground: @background;
+@placeholderUnderlay: @background;
+
+/* Placeholder Overlayed Background */
+@placeholderBackground: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
+@placeholderBackgroundOpacity: 0.5;
+@placeholderBackgroundTransition: opacity @transitionDuration @transitionEasing;
 
 /* Icon */
-@iconSize: 7rem;
-@iconTransition: color @defaultDuration @defaultEasing;
-@iconColor: @invertedTextColor;
-@iconShadow: @subtleShadow;
+@iconBackground: @veryStrongTransparentBlack;
+@iconSize: 6rem;
+@iconTransition:
+  opacity @transitionDuration @transitionEasing,
+  color @transitionDuration @transitionEasing
+;
+@iconColor: @white;
+@iconShadow:
+  0px 2px 10px rgba(34, 36, 38, 0.2)
+;
 @iconZIndex: 10;
 
 /*-------------------
        States
 --------------------*/
 
-/* Video */
-@hoverIconBackground: rgba(0, 0, 0, 0);
+/* Hover */
+@hoverPlaceholderBackground: @placeholderBackground;
+@hoverPlaceholderBackgroundOpacity: 1;
 @hoverIconColor: @white;