youtube embeds

bustle · Aug 7, 2014 · 028f3ba · 028f3ba
1 parent 2304dc3
commit 028f3ba
Show file tree

Hide file tree

Showing 8 changed files with 619 additions and 436 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -94,9 +94,19 @@ <h3>Keyboard shortcuts:</h3>
     });
     */
 
-    // Modifing what gets rendered for a Type
-    editor.setRendererFor(ContentKit.Type.EMBED, function(model, type) {
-      return '<figure class="ck-editor-embed" contenteditable="false"><h5>' + type.name + ' (' + model.attributes.provider_name + ') : ' + model.attributes.title + '</h5><img src="' + model.attributes.thumbnail + '"/></figure>';
+    // Overriding what gets rendered for a Type
+    // Here, we are wrapping the default embed renderer with more info and controls
+    editor.willRenderType(ContentKit.Type.EMBED, function(model) {
+      var embedAttrs = model.attributes;
+      var isVideo = embedAttrs.embed_type === 'video';
+      return '<div class="ck-embed" contenteditable="false">' +
+                '<figure>' + 
+                  (isVideo ? '<div class="ck-video-container">' : '') + this.renderer.render(model) + (isVideo ? '</div>' : '') + 
+                  '<figcaption>' + embedAttrs.provider_name + ': ' + 
+                    '<a target="_blank" href="' + embedAttrs.url + '">' + embedAttrs.title + '</a>' + 
+                  '</figcaption>' +
+                '</figure>' +
+              '</div>';
     });
 
   </script>

diff --git a/dist/content-kit-editor.css b/dist/content-kit-editor.css
@@ -248,20 +248,57 @@
 .ck-file-input {
   display: none;
 }
-.ck-editor-embed {
+.ck-embed {
   text-align: center;
   margin: 1em 0;
-  background-color: #fafafa;
-  border: 2px solid #eee;
-  padding: 1em;
-  border-radius: 4px;
-  color: #666;
-  font-family: Helvetica Neue;
-  cursor: pointer;
+  border: 2px solid transparent;
+  border-radius: 2px;
 }
-.ck-editor-embed.selected {
+.ck-embed.selected {
   border-color: #4cd964;
 }
+.ck-embed figure {
+  position: relative;
+  margin: 0;
+}
+.ck-embed figcaption {
+  color: #999;
+  font-size: 0.7em;
+  line-height: 1.3em;
+  font-style: italic;
+  margin: 10px 0;
+}
+.ck-embed figcaption a {
+  color: #999;
+  text-decoration: underline;
+}
+.ck-embed figcaption a:hover {
+  color: #666;
+}
+@media screen and (min-width: 1080px) {
+  .ck-embed figcaption {
+    position: absolute;
+    top: 0;
+    right: -140px;
+    width: 120px;
+    text-align: left;
+    margin: 0;
+  }
+}
+.ck-video-container {
+  position: relative;
+  overflow: hidden;
+  padding-top: 56.25%;
+}
+.ck-video-container iframe,
+.ck-video-container object,
+.ck-video-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 .ck-message {
   position: fixed;
   top: 0.45em;