Add ability to embed youtube videos easily

chutsu · chutsu · commit 59c50599f1ae · 2017-03-27T19:12:56.000-04:00
diff --git a/css/ditto.css b/css/ditto.css
@@ -318,6 +318,9 @@ input[type=search] {
     margin-bottom: 0;
 }
 
+#content .youtube_video {
+  margin-top: 20px;
+}
 
 #hide {
     display: none;
diff --git a/docs/features.md b/docs/features.md
@@ -0,0 +1,12 @@
+# Features
+
+- Embed Youtube videos
+
+
+## Embed Youtube videos
+
+Use `[ditto:youtube:<youtube url>]` to embed youtube videos:
+
+    [ditto:youtube:https://www.youtube.com/watch?v=9CS7j5I6aOc]
+
+[ditto:youtube:https://www.youtube.com/watch?v=9CS7j5I6aOc]
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>ditto</title>  <!-- EDIT ME!! -->
+    <title>ditto</title>
 
     <!-- JQUERY -->
     <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
@@ -37,7 +37,6 @@
     <!-- DITTO -->
     <link rel="stylesheet" href="css/ditto.css">
     <script src="js/ditto.js"></script>
-
 </head>
 <body>
     <!-- ESSENTIAL -->
diff --git a/js/ditto.js b/js/ditto.js
@@ -267,6 +267,43 @@ $(function($) {
     }
   }
 
+  function youtube_url_extract(data) {
+    var yt_regex = /(https?\:\/\/)?(www\.youtube\.com|youtu\.?be)\/.+/g;
+    var yt_url = String(data.match(yt_regex));
+    yt_url = yt_url.replace(/]/g, "");
+    return yt_url;
+  }
+
+  function youtube_url_to_embed(data) {
+    return data = data.replace(/watch\?v\=/g, "embed/");
+  }
+
+  function create_youtube_embeds(data) {
+    // replaces [ditto:youtube:<some youtube link>]
+    // with a proper youtube embed iframe
+    var token_regex = /\[ditto\:youtube:(https?\:\/\/)?(www\.youtube\.com|youtu\.?be)\/.+\]/g;
+    var yt_url = youtube_url_extract(data);
+    var yt_embed_url = youtube_url_to_embed(yt_url);
+
+    // youtube embed html
+    var embed_html = `<div class="youtube_video">
+      <div style="position:relative;height:0;padding-bottom:56.25%">
+        <iframe src="<link>?ecver=2"
+          width="640"
+          height="360"
+          frameborder="0"
+          style="position:absolute;width:100%;height:100%;left:0"
+          allowfullscreen>
+        </iframe>
+      </div>
+    </div>`;
+    embed_html = embed_html.replace("<link>", yt_embed_url);
+
+    // replace match code with youtube video
+    data = data.replace(token_regex, embed_html);
+    return data;
+  }
+
   function normalize_paths() {
     // images
     ditto.content_id.find("img").map(function() {
@@ -387,6 +424,7 @@ $(function($) {
   function compile_into_dom(path, data, cb) {
     hide_errors();
 
+    data = create_youtube_embeds(data);
     data = marked(escape_html(data));
     data = unescape_html(data);
     ditto.content_id.html(data);
diff --git a/sidebar.md b/sidebar.md
@@ -11,6 +11,7 @@ version 0.13
 - [Why use ditto?](#docs/why_use_ditto)
 - [How do I run ditto locally?](#docs/how_do_i_run_ditto_locally)
 - [How I write equations in ditto?](#docs/maths_demo)
+- [Features](#docs/features)
 
 ## Projects that use ditto
 - [playground](http://chutsu.github.io/playground)

Original file line number	Diff line number	Diff line change
`@@ -318,6 +318,9 @@ input[type=search] {`
`318`	`318`	`margin-bottom: 0;`
`319`	`319`	`}`
`320`	`320`
	`321`	`+#content .youtube_video {`
	`322`	`+ margin-top: 20px;`
	`323`	`+}`
`321`	`324`
`322`	`325`	`#hide {`
`323`	`326`	`display: none;`