Added reddit plugin. Hooked support for CommonJS/AMD/Node. Closes #7

README.md

@@ -13,11 +13,11 @@
 - YouTube and Vimeo videos URLs
 - Instagram URLs containing posts and videos
 - Pinterest URLs containing board, profile and pins
-- Github URLs containing gists
 - Google Maps URLs containing cordinates to a location
-- Embeds other urls like Soundcloud, Spotify or PDF, MP4, Webm, ... as `iframe`
+- Embeds other urls like Github Gists, Soundcloud, Spotify or PDF, MP4, Webm, ... as `iframe`
 - Embeds any URL that fulfils HTTP access control (CORS) policy
-- Supports IE10+ and all modern browsers.
+- Extended plugin support for additonal oembed services
+- Supports IE10+ and all modern browsers
 
 ---
 

docs/css/style.css

@@ -1,5 +1,5 @@
 @import "https://fonts.googleapis.com/css?family=Rubik:400,700";
-@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
+@import "https://use.fontawesome.com/releases/v5.6.3/css/all.css";
 
 html,
 body,
@@ -556,6 +556,29 @@ footer div span {
   font-weight: 600;
 }
 
+footer .buyme-button {
+  line-height: 1.6;
+  color: #fff;
+  background: linear-gradient(90deg, #223cbf, #883fa6 51%, #105dd9) 100%;
+  box-shadow: 0 10px 25px #4949493d;
+  border: 0;
+  border-radius: 10px;
+  flex: 1 1 auto;
+  font-weight: bold;
+  font-size: 16px;
+  margin: 10px;
+  padding: 25px;
+  transition: 0.5s;
+  text-align: center;
+  outline: 0;
+}
+
+footer .buyme-button i {
+  font-size: 24px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
 section#action-hero {
   position: fixed;
   top: 50%;

docs/index.html

@@ -36,14 +36,15 @@
         <a class="active">Setup</a>
         <a href="https://shobhitsharma.github.io/embedo/usage">Usage</a>
         <a href="https://github.com/shobhitsharma/embedo/wiki">Docs</a>
-        <a class="github-link" href="https://github.com/shobhitsharma/embedo" target="_blank"><i class="fa fa-github"></i></a>
+        <a class="github-link" href="https://github.com/shobhitsharma/embedo" target="_blank"><i class="fab fa-github"></i></a>
       </header>
       <section class="teaser">
         <h1>embedo</h1>
         <p>A simple, lightweight and standalone content embed plugin for web</p>
         <div class="buttons">
-          <a href="https://github.com/shobhitsharma/embedo"><i class="fa fa-star"></i> Star</a>
-          <a href="https://github.com/shobhitsharma/embedo/archive/master.zip"><i class="fa fa-cloud-download"></i> Download</a>
+          <a href="https://github.com/shobhitsharma/embedo"><i class="fas fa-star"></i> Star</a>
+          <a href="https://github.com/shobhitsharma/embedo/wiki"><i class="fab fa-readme"></i>
+            Documentation</a>
         </div>
       </section>
       <section class="test-case" id="test-case">
@@ -144,43 +145,56 @@ <h2>embedo.js</h2>
         <div class="supported-sites">
           <h4>What's currently supported?</h4>
           <div class="supports">
-            <span class="site fa fa-facebook"></span>
+            <span class="site fab fa-facebook-square"></span>
             <span class="site-description">Facebook URLs containing page, post, photos, videos or comments</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-twitter"></span>
+            <span class="site fab fa-twitter"></span>
             <span class="site-description">Twitter URLs containing user timeline and tweets</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-youtube"></span>
+            <span class="site fab fa-youtube"></span>
             <span class="site-description">YouTube videos URLs, playlists will play in loop</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-instagram"></span>
+            <span class="site fab fa-instagram"></span>
             <span class="site-description">Instagram URLs containing posts and videos</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-pinterest"></span>
+            <span class="site fab fa-pinterest"></span>
             <span class="site-description">Pinterest URLs containing boards, profile and pins</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-vimeo"></span>
+            <span class="site fab fa-vimeo"></span>
             <span class="site-description">Vimeo URLs containing videos</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-google"></span>
+            <span class="site fab fa-soundcloud"></span>
+            <span class="site-description">SoundCloud URLs containing videos</span>
+          </div>
+          <div class="supports">
+            <span class="site fab fa-reddit-alien"></span>
+            <span class="site-description">Vimeo URLs containing videos</span>
+          </div>
+          <div class="supports">
+            <span class="site fab fa-google"></span>
             <span class="site-description">Google Maps URLs containing cordinates to a location</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-link"></span>
-            <span class="site-description">Embeds third party URLs, gists or formats like .pdf, .webm, .ppsx etc.</span>
+            <span class="site fas fa-code"></span>
+            <span class="site-description">Fallback to iframe for allowed CORS urls or formats like .pdf, .webm, etc.</span>
           </div>
         </div>
         <div class="copyrights">
           <a href="https://github.com/shobhitsharma/embedo/blob/master/LICENSE.md" target="_blank">
-            <i class="fa fa-copyright"></i> Distributed under MIT License
+            <i class="fas fa-copyright"></i> Distributed under MIT License
           </a>
         </div>
+        <div class="donate-me">
+          <p>Does this help you?</p>
+          <button class="buyme-button"><a href="https://www.paypal.me/shobhitsharma" target="_blank">Buy me a
+              generous coffee <i class="fas fa-mug-hot"></i> via PayPal</a></button>
+        </div>
       </footer>
     </div>
     <div class="sky">
@@ -229,6 +243,7 @@ <h4>What's currently supported?</h4>
     })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
     ga('create', 'UA-80234662-2', 'auto');
     ga('send', 'pageview');
+
   </script>
   <!-- Here is how embedo.js get declared on top of your implementation -->
   <script src="https://unpkg.com/embedo/embedo.min.js"></script>

docs/usage.html

@@ -36,14 +36,15 @@
         <a href="https://shobhitsharma.github.io/embedo">Setup</a>
         <a class="active">Usage</a>
         <a href="https://github.com/shobhitsharma/embedo/wiki">Docs</a>
-        <a class="github-link" href="https://github.com/shobhitsharma/embedo" target="_blank"><i class="fa fa-github"></i></a>
+        <a class="github-link" href="https://github.com/shobhitsharma/embedo" target="_blank"><i class="fab fa-github"></i></a>
       </header>
       <section class="teaser">
         <h1>embedo</h1>
         <p>A simple, lightweight and standalone content embed plugin for web</p>
         <div class="buttons">
-          <a href="https://github.com/shobhitsharma/embedo"><i class="fa fa-star"></i> Star</a>
-          <a href="https://github.com/shobhitsharma/embedo/archive/master.zip"><i class="fa fa-cloud-download"></i> Download</a>
+          <a href="https://github.com/shobhitsharma/embedo"><i class="fas fa-star"></i> Star</a>
+          <a href="https://github.com/shobhitsharma/embedo/wiki"><i class="fab fa-readme"></i>
+            Documentation</a>
         </div>
       </section>
       <div class="topbar">
@@ -53,7 +54,9 @@ <h2>usage.md</h2>
       <section class="embedo-documentation markdown-body has-shadow">
         <h1 id="embedo-embed-guidelines">embedo / Embed Guidelines</h1>
 
-        <p>Embedo only works for public URI having no authentication required or promising cross-domain policies of the host. It uses oEmbed API endpoints for facebook, twitter, instagram and vimeo acting more as a wrapper around respective API which allows using existing field-value set as explained further in documentation.</p>
+        <p>Embedo only works for public URI having no authentication required or promising cross-domain policies of the
+          host. It uses oEmbed API endpoints for facebook, twitter, instagram and vimeo acting more as a wrapper around
+          respective API which allows using existing field-value set as explained further in documentation.</p>
 
 
         <h2 id="quick-links">Quick Links</h2>
@@ -74,10 +77,11 @@ <h2 id="facebook-posts">Facebook Page, Posts and Comments</h2>
 
         <p>This supports only <strong>public</strong> entities as page, post, videos, photos or comment(s).</p>
 
-        <p>The URL must contain the <code>pageId</code> or <code>pageUsername</code> and URL for photos, posts or videos should look or closer which support <a href="https://www.regexpal.com/94994">this expression</a>.</p>
+        <p>The URL must contain the <code>pageId</code> or <code>pageUsername</code> and URL for photos, posts or
+          videos should look or closer which support <a href="https://www.regexpal.com/94994">this expression</a>.</p>
 
 
-<pre class="prettyprint"><code class="language-bash hljs ">https://www.facebook.com/[FACEBOOK_HANDLE]
+        <pre class="prettyprint"><code class="language-bash hljs ">https://www.facebook.com/[FACEBOOK_HANDLE]
 https://www.facebook.com/[FACEBOOK_HANDLE]/photos/[SESSION_OR_USER_SCOPE_ID]/[POST_ID_HERE]
 https://www.facebook.com/[FACEBOOK_HANDLE]/posts/[POST_ID_HERE]
 https://www.facebook.com/[FACEBOOK_HANDLE]/videos/[POST_ID_HERE]/
@@ -86,7 +90,9 @@ <h2 id="facebook-posts">Facebook Page, Posts and Comments</h2>
 https://www.facebook.com/[FACEBOOK_HANDLE]/posts/[POST_ID_HERE]?comment_id=[COMMENT_ID]
 https://www.facebook.com/[FACEBOOK_HANDLE]/posts/[POST_ID_HERE]?reply_comment_id=[REPLY_COMMENT_ID]</code></pre>
 
-        <p>PS: If you’re running this in headless browsers (eg. phantom) or demos on jsfiddle/codepen/etc, facebook SDK will throw security exception due to recent changes in their server. But it will work normally when script is imported.</p>
+        <p>PS: If you’re running this in headless browsers (eg. phantom) or demos on jsfiddle/codepen/etc, facebook SDK
+          will throw security exception due to recent changes in their server. But it will work normally when script is
+          imported.</p>
         <p><strong>Resources</strong></p>
         <ul>
           <li><a href="https://developers.facebook.com/docs/plugins/oembed-endpoints">oEmbed API Documentation</a></li>
@@ -98,21 +104,21 @@ <h2 id="twitter-tweets-timelines-and-grid">Twitter - Tweets, Timelines and Grid<
         <p>This is straightforward, the exact twitter URL can be embedded while passing options from oembed API.</p>
 
 
-<pre class="prettyprint"><code class="language-bash hljs ">https://twitter.com/[TWITTER_HANDLE]
+        <pre class="prettyprint"><code class="language-bash hljs ">https://twitter.com/[TWITTER_HANDLE]
 https://twitter.com/[TWITTER_HANDLE]/status/[TWEET_ID]
 https://twitter.com/[TWITTER_HANDLE]/timelines/[TIMELINE_ID]</code></pre>
 
         <p><strong>For Timeline embed:</strong>
         </p>
 
 
-<pre class="prettyprint"><code class="language-js hljs ">embedo.load(HTMLElement, <span class="hljs-string">'https://twitter.com/TwitterDev/timelines/539487832448843776'</span>)</code></pre>
+        <pre class="prettyprint"><code class="language-js hljs ">embedo.load(HTMLElement, <span class="hljs-string">'https://twitter.com/TwitterDev/timelines/539487832448843776'</span>)</code></pre>
 
         <p><strong>For Timeline Grid embed:</strong>
         </p>
 
 
-<pre class="prettyprint"><code class="language-js hljs ">embedo.load(HTMLElement, <span class="hljs-string">'https://twitter.com/TwitterDev/timelines/539487832448843776'</span>, {
+        <pre class="prettyprint"><code class="language-js hljs ">embedo.load(HTMLElement, <span class="hljs-string">'https://twitter.com/TwitterDev/timelines/539487832448843776'</span>, {
   widget_type: <span class="hljs-string">'grid'</span>
 })</code></pre>
         <p><strong>Resources</strong></p>
@@ -127,19 +133,20 @@ <h2 id="instagram-posts">Instagram Posts</h2>
         <p>Only posts can be embedded, no timeline. So your URL should be closer to this pattern:</p>
 
 
-<pre class="prettyprint"><code class="language-bash hljs ">https://www.instagram.com/p/[POST_ID_HERE]</code></pre>
-              <p><strong>Resources</strong></p>
+        <pre class="prettyprint"><code class="language-bash hljs ">https://www.instagram.com/p/[POST_ID_HERE]</code></pre>
+        <p><strong>Resources</strong></p>
         <ul>
           <li><a href="https://www.instagram.com/developer/embedding/">Instagram Embed Guidelines</a></li>
         </ul>
 
 
         <h2 id="youtube-videos">YouTube Videos</h2>
 
-        <p>Supports URLs matching <code>/watch?v=</code> or <code>/embed</code> in URL should work. Avoid playlist(s) URL.</p>
+        <p>Supports URLs matching <code>/watch?v=</code> or <code>/embed</code> in URL should work. Avoid playlist(s)
+          URL.</p>
 
 
-<pre class="prettyprint"><code class="language-bash hljs ">https://www.youtube.com/watch?v=[VIDEO_ID]
+        <pre class="prettyprint"><code class="language-bash hljs ">https://www.youtube.com/watch?v=[VIDEO_ID]
 https://www.youtube.com/embed/[VIDEO_ID]
 https://youtu.be/[VIDEO_ID]</code></pre>
 
@@ -149,7 +156,7 @@ <h2 id="vimeo">Vimeo</h2>
         <p>Supports URLs matching video or channel links.</p>
 
 
-<pre class="prettyprint"><code class="language-bash hljs ">https://vimeo.com/[VIDEO_ID]
+        <pre class="prettyprint"><code class="language-bash hljs ">https://vimeo.com/[VIDEO_ID]
 https://vimeo.com/channels/[CHANNEL_HANDLE]/[VIDEO_ID]</code></pre>
 
 
@@ -158,14 +165,14 @@ <h2 id="pinterest">Pinterest</h2>
         <p>By default, supports Pins embed.</p>
 
 
-<pre class="prettyprint"><code class="language-bash hljs ">https://www.pinterest.com/pin/[PIN_ID]
+        <pre class="prettyprint"><code class="language-bash hljs ">https://www.pinterest.com/pin/[PIN_ID]
 https://www.pinterest(.co.uk|.de|ANY)/pin/[PIN_ID]/</code></pre>
 
         <p><strong>For Board embed:</strong>
         </p>
 
 
-<pre class="prettyprint"><code class="language-js hljs ">embedo.load(HTMLElement, <span class="hljs-string">'https://www.pinterest.com/pinterest/official-news/'</span>, {
+        <pre class="prettyprint"><code class="language-js hljs ">embedo.load(HTMLElement, <span class="hljs-string">'https://www.pinterest.com/pinterest/official-news/'</span>, {
   <span class="hljs-string">'data-pin-do'</span>: <span class="hljs-string">'embedBoard'</span>,
   <span class="hljs-string">'data-pin-board-width'</span>: <span class="hljs-number">400</span>,
   <span class="hljs-string">'data-pin-scale-height'</span>: <span class="hljs-number">240</span>,
@@ -177,7 +184,7 @@ <h2 id="pinterest">Pinterest</h2>
         </p>
 
 
-<pre class="prettyprint"><code class="language-js hljs ">embedo.load(HTMLElement, <span class="hljs-string">'https://www.pinterest.com/pinterest/'</span>, {
+        <pre class="prettyprint"><code class="language-js hljs ">embedo.load(HTMLElement, <span class="hljs-string">'https://www.pinterest.com/pinterest/'</span>, {
   <span class="hljs-string">'data-pin-do'</span>: <span class="hljs-string">'embedUser'</span>
 })</code></pre>
         <p><strong>Resources</strong></p>
@@ -188,54 +195,68 @@ <h2 id="pinterest">Pinterest</h2>
 
         <h2 id="others">Others</h2>
 
-        <p>The external links, based upon detected mime gets embed either in <code>&lt;iframe&gt;</code> or <code>&lt;video&gt;</code> elements. These could be any URL possible which has public access or cross-domain disabled.</p>
+        <p>The external links, based upon detected mime gets embed either in <code>&lt;iframe&gt;</code> or <code>&lt;video&gt;</code>
+          elements. These could be any URL possible which has public access or cross-domain disabled.</p>
 
         <p>Its also possible to override the HTML Tag using:</p>
 
-<pre class="prettyprint"><code class="language-js hljs ">embedo.load(HTMLElement, <span class="hljs-string">'https://my.awesome/url/here'</span>, { tagName: <span class="hljs-string">'embed'</span> })</code></pre>
+        <pre class="prettyprint"><code class="language-js hljs ">embedo.load(HTMLElement, <span class="hljs-string">'https://my.awesome/url/here'</span>, { tagName: <span class="hljs-string">'embed'</span> })</code></pre>
       </section>
 
       <footer>
         <div class="supported-sites">
           <h4>What's currently supported?</h4>
           <div class="supports">
-            <span class="site fa fa-facebook"></span>
+            <span class="site fab fa-facebook-square"></span>
             <span class="site-description">Facebook URLs containing page, post, photos, videos or comments</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-twitter"></span>
+            <span class="site fab fa-twitter"></span>
             <span class="site-description">Twitter URLs containing user timeline and tweets</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-youtube"></span>
+            <span class="site fab fa-youtube"></span>
             <span class="site-description">YouTube videos URLs, playlists will play in loop</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-instagram"></span>
+            <span class="site fab fa-instagram"></span>
             <span class="site-description">Instagram URLs containing posts and videos</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-pinterest"></span>
+            <span class="site fab fa-pinterest"></span>
             <span class="site-description">Pinterest URLs containing boards, profile and pins</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-vimeo"></span>
+            <span class="site fab fa-vimeo"></span>
+            <span class="site-description">Vimeo URLs containing videos</span>
+          </div>
+          <div class="supports">
+            <span class="site fab fa-soundcloud"></span>
+            <span class="site-description">SoundCloud URLs containing videos</span>
+          </div>
+          <div class="supports">
+            <span class="site fab fa-reddit-alien"></span>
             <span class="site-description">Vimeo URLs containing videos</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-google"></span>
+            <span class="site fab fa-google"></span>
             <span class="site-description">Google Maps URLs containing cordinates to a location</span>
           </div>
           <div class="supports">
-            <span class="site fa fa-link"></span>
-            <span class="site-description">Embeds third party URLs, gists or formats like .pdf, .webm, .ppsx etc.</span>
+            <span class="site fas fa-code"></span>
+            <span class="site-description">Fallback to iframe for allowed CORS urls or formats like .pdf, .webm, etc.</span>
           </div>
         </div>
         <div class="copyrights">
           <a href="https://github.com/shobhitsharma/embedo/blob/master/LICENSE.md" target="_blank">
-            <i class="fa fa-copyright"></i> Distributed under MIT License
+            <i class="fas fa-copyright"></i> Distributed under MIT License
           </a>
         </div>
+        <div class="donate-me">
+          <p>Does this help you?</p>
+          <button class="buyme-button"><a href="https://www.paypal.me/shobhitsharma" target="_blank">Buy me a
+              generous coffee <i class="fas fa-mug-hot"></i> via PayPal</a></button>
+        </div>
       </footer>
     </div>
   </main>
@@ -253,6 +274,7 @@ <h4>What's currently supported?</h4>
     })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
     ga('create', 'UA-80234662-2', 'auto');
     ga('send', 'pageview');
+
   </script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
 </body>