From da783659d7d9346780b0c42c06721e8a12f2a8bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= <jlantunez@gmail.com>
Date: Mon, 3 Apr 2017 19:51:33 +0200
Subject: [PATCH] updating demos

---
 demos/index.html      |  36 +++++--
 demos/interviews.html |  35 ++++---
 demos/longforms.html  |  14 +--
 demos/media.html      | 226 ++++++++++++++++++++++--------------------
 4 files changed, 175 insertions(+), 136 deletions(-)

diff --git a/demos/index.html b/demos/index.html
index a593ae3..caf368c 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -92,7 +92,7 @@
     </header>
 
     <main role="main">
-      <article id="webslides">  <!-- Slideshow? id="webslides" -->
+      <article>  <!-- Slideshow? id="webslides" -->
 
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
@@ -121,7 +121,7 @@
                     <img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
                     <figcaption>
                       <h2>Why WebSlides?</h2>
-                      <time datetime="2017-12-08T21:21:44-05:00">Jan 08, 2017</time>
+                      <time datetime="2017-01-08T16:21:44-08:00">Jan 08, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -132,7 +132,7 @@
                     <img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
                     <figcaption>
                       <h2>Landings</h2>
-                      <time datetime="2017-01-07T19:21:26-05:00">Jan 07, 2017</time>
+                      <time datetime="2017-01-07T19:21:26-08:00">Jan 07, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -143,7 +143,7 @@
                     <img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
                     <figcaption>
                       <h2>Portfolios</h2>
-                      <time datetime="2017-01-06T21:22:21-05:00">Jan 06, 2017</time>
+                      <time datetime="2017-01-06T21:22:21-08:00">Jan 06, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -154,7 +154,29 @@
                     <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
                     <figcaption>
                       <h2>Apple Keynote</h2>
-                      <time datetime="2017-01-05T20:13:48-05:00">Jan 05, 2017</time>
+                      <time datetime="2017-01-05T20:13:48-08:00">Mar 04, 2017</time>
+                    </figcaption>
+                  </figure>
+                </a>
+              </li>
+              <li>
+                <a href="../demos/longforms.html" title="Longform Articles">
+                  <figure>
+                    <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-longform.png">
+                    <figcaption>
+                      <h2>Apple Keynote</h2>
+                      <time datetime="2017-04-02T20:16:48-08:00">Mar 03, 2017</time>
+                    </figcaption>
+                  </figure>
+                </a>
+              </li>
+              <li>
+                <a href="../demos/interviews.html" title="Interviews">
+                  <figure>
+                    <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-interviews.png">
+                    <figcaption>
+                      <h2>Apple Keynote</h2>
+                      <time datetime="2017-04-04T20:08:24-12:00">Jan 05, 2017</time>
                     </figcaption>
                   </figure>
                 </a>
@@ -167,7 +189,7 @@
           <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2 class="aligncenter">General Questions</h2>
-            <p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a>.</p>
+            <p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a> &middot; <a href="../demos/media.html" title="WebSlides Media">Media</a>.</p>
             <div class="grid">
               <div class="column">
                 <h6>Why WebSlides? Good karma</h6>
@@ -182,7 +204,7 @@
               <!-- end .column -->
               <div class="column">
                 <h6>What can you do with WebSlides?</h6>
-                <p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/components.html#slide=98">background images</a>, <a href="../demos/components.html#slide=101">videos</a>...
+                <p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/media.html#slide=2">background images, videos</a>...
                 </p>
                 <h6>How easy is WebSlides?</h6>
                 <p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p>
diff --git a/demos/interviews.html b/demos/interviews.html
index e865c89..a8c6478 100644
--- a/demos/interviews.html
+++ b/demos/interviews.html
@@ -41,7 +41,7 @@
     <meta property="og:title" content="WebSlides Demo: Longform Interviews" /> <!-- EDIT -->
     <meta property="og:description" content="Create longform interviews with ease. Just the essentials."> <!-- EDIT -->
     <meta property="og:updated_time" content="2017-03-28T12:17:24"> <!-- EDIT -->
-    <meta property="og:image" content="https://webslides.tv/static/images/share-interviews.jpg" > <!-- EDIT -->
+    <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
     <meta property="og:image:width" content="800">
     <meta property="og:image:height" content="429">
     
@@ -51,7 +51,7 @@
     <meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
     <meta name="twitter:title" content="WebSlides Demo: Longform Interviews"> <!-- EDIT -->
     <meta name="twitter:description" content="Create longform interviews with ease. Just the essentials."> <!-- EDIT -->
-    <meta name="twitter:image" content="https://webslides.tv/static/images/share-interviews.jpg"> <!-- EDIT -->
+    <meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
     
     <!-- FAVICONS -->
     <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
@@ -69,7 +69,7 @@
   <body>
     <header role="banner">
       <nav role="navigation">
-        <p class="logo"><a href="https://webslides.tv" title="WebSlides">WebSlides</a></p>
+        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
             <a rel="external" href="https://github.com/webslides/webslides" title="Github">
@@ -97,16 +97,15 @@
       
         <section class="bg-black">
           <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
-          <span class="background-bottom" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/1600x800')"></span>
+          <span class="background" style="background-image:url('https://source.unsplash.com/E695OZJiju4/1600x800')"></span>
           <!--.wrap = container width: 90% -->
           <div class="wrap">
-            <p class="text-subtitle">Powered by <a href="https://webslides.tv">WebSlides</a></p>
+            <p class="text-subtitle">Powered by <a href="https://webslides.tv">WebSlides</a>.</p>
             <h1>
               <strong>Designing Interviews</strong>
             </h1>
-            <p class="text-intro">All content is for demo purposes only.
-            </p>
-            <p><img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar David González"> By David González. Nov 8th, 2024.</p>
+            <p>All content is for demo purposes only.</p>
+            <p><img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar David Yang"> By David Yang. Nov 8th, 2024.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -128,7 +127,7 @@
               </dd>
               <dt>David:</dt>
               <dd>
-                <p><strong><a href="http://www.newmediarights.org/are_interviews_copyrighted" target="_blank">Are interviews copyrighted?</a> When does an interview become copyrightable?</strong></p>
+                <p><strong>Are interviews copyrighted? When does an interview become copyrightable?</strong></p>
               </dd>
               <dt>Sheryl:</dt>
               <dd>
@@ -153,7 +152,7 @@
             </dl>
             <hr>
             <div class="text-pull embed">
-              <iframe width="800" height="450" src="https://www.youtube.com/embed/7xYZ3rMT8_A?rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe>
+              <iframe width="800" height="450" src="https://www.youtube.com/embed/7xYZ3rMT8_A?rel=0&amp;controls=0" allowfullscreen></iframe>
             </div>
             <!--.text-pull.embed (responsive video) -->
             <hr>
@@ -207,24 +206,28 @@
             <dl class="text-interview">
               <dt>David:</dt>
               <dd>
-                <p><strong>What are some methods to record an interview and what should the person being interviewed do?</strong></p>
+                <p><strong>Is a web address (a domain name) subject to copyright law?</strong></p>
               </dd>
               <dt>Sheryl:</dt>
               <dd>
-                <p>Most often when problems with interview ownership arise it’s because persons being interviewed are unhappy with the way an interviewer uses their responses during interviews to mislead readers or viewers of a broadcast. This causes interviewees to claim their copyright was infringed because they claim to own the copyright to their speech during the interview.</p>
+                <p>No, for a variety of reasons web addresses (also known as a domain names or URLs) aren't protected by copyright. Even though copyright doesn’t protect domain names, that doesn’t mean domain names are entirely unprotected. Trademark law protects web addresses. And for a variety of reasons, companies are often more apt to go after individual instances of trademark infringement than individual copyright infringers. </p>
               </dd>
               <dt>David:</dt>
               <dd>
-                <p><strong>When do problems with interview ownership arise, and who usually owns the copyright?</strong></p>
+                <p><strong>Are there easier alternatives than copyright?</strong></p>
               </dd>
               <dt>Sheryl:</dt>
               <dd>
-                <p>The most successful way to fix an interview is for interviewers to audio record or hand write the responses of the person being interviewed. If the interview is recorded by hand, it is helpful if the writing is legible and clearly communicates the conversation because it may help solve questions about fixation.  Short hand that only describes excerpts from the interview typically are not enough to constitute fixation and copyright ownership. So please remember, if there is no fixation of the interview then no copyright exists in that interview.</p>
+                 <p>Some persons and organizations hope to make the rules about using and reusing work more user-friendly. These groups may make their work freely available under <a href="https://creativecommons.org/">Creative Commons</a> licenses or expressly abandon them into the public domain. </p>
               </dd>
               <dd>
-                <p>Further, if you are being interviewed please be aware that you do not possess ownership over your responses in most situations. It is always best to briefly think about your answer before you respond to avoid the misuse of your words by others.  And if you truly don’t feel comfortable being interviewed by a particular media source, remember you always have the power to say no to doing the interview.</p>
+                <p>But just because an author employs either of these copyright alternatives, that doesn’t mean that they are completely free of legal issues. For example, imagine you’re an advertising designer for Virgin Mobile, and you need a photo of a pretty teenage girl for your latest ad. You find a photo on Flickr that is free to use under a Creative Commons Attribution license. You use the photo in your ad campaign and plaster the photo on bus stops across Australia. This is exactly what happened, and since the photographer was adequately credited and copyright issues were non-existent everybody lived happily ever after, right?</p>
               </dd>
-            </dl>
+              <dd>
+                <p>If you have any questions about alternatives to the standard copyright scheme or how these alternatives are being utilized by thousands of artists every day, feel free to contact <a href="https://www.newmediarights.org/about_us/contact_us">New Media Rights</a>.</p>
+              </dd>
+            </dl>           
+            <p><a href="http://www.newmediarights.org/are_interviews_copyrighted" target="_blank">"Are interviews copyrighted"</a> by NewMediaRights is licensed under CC BY NC 3.0.</p>
             <hr>
             <h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
             <p class="aligncenter">Subscribe to our newsletter. All content is for demo purposes only.</p>
diff --git a/demos/longforms.html b/demos/longforms.html
index 39f484c..d8e8bd4 100644
--- a/demos/longforms.html
+++ b/demos/longforms.html
@@ -41,7 +41,7 @@
     <meta property="og:title" content="WebSlides Demo: Longforms" /> <!-- EDIT -->
     <meta property="og:description" content="Create longform articles with ease. Just the essentials."> <!-- EDIT -->
     <meta property="og:updated_time" content="2017-03-28T18:24:48"> <!-- EDIT -->
-    <meta property="og:image" content="https://webslides.tv/static/images/share-longforms.jpg" > <!-- EDIT -->
+    <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
     <meta property="og:image:width" content="800">
     <meta property="og:image:height" content="429">
     
@@ -51,7 +51,7 @@
     <meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
     <meta name="twitter:title" content="WebSlides Demo: Longforms"> <!-- EDIT -->
     <meta name="twitter:description" content="Create longform articles with ease. Just the essentials."> <!-- EDIT -->
-    <meta name="twitter:image" content="https://webslides.tv/static/images/share-longforms.jpg"> <!-- EDIT -->
+    <meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
     
     <!-- FAVICONS -->
     <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
@@ -69,7 +69,7 @@
   <body>
     <header role="banner">
       <nav role="navigation">
-        <p class="logo"><a href="https://webslides.tv" title="WebSlides">WebSlides</a></p>
+        <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
             <a rel="external" href="https://github.com/webslides/webslides" title="Github">
@@ -101,7 +101,7 @@
           <!--.wrap = container width: 90% -->
           <div class="wrap aligncenter">
             <h1 class="text-landing">
-              <strong>Design Stories</strong>
+              <strong>Longform Demo</strong>
             </h1>
             <p class="text-intro">How to engage readers with longform journalism?<br> All content is for demo purposes only.
             </p>
@@ -120,7 +120,7 @@
           <!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
           <div class="wrap longform">
             <h2><strong>The Art of Storytelling</strong></h2>
-            <p><img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar David González"> By David González. Nov 16th, 2032.</p>
+            <p><a href="https://twitter.com/webslides" title="David Yang"><img class="avatar-40" src="../static/images/avatar.jpg" alt="David Yang"></a> Nov 16th, 2032.</p>
             <p class="text-intro">
               WebSlides want to help tell stories that are meaningful. All content is for demo purposes only.
             </p>
@@ -225,7 +225,7 @@
             </ol>
             <hr />
             <h3>Table Styles</h3>
-            <table cellspacing="0" cellpadding="0">
+            <table>
               <tbody>
                 <tr>
                   <th>Table Header 1</th>
@@ -264,7 +264,7 @@
             <p>Storytelling is increasingly used in advertising today in order to build customer loyalty. According to Giles Lury, this marketing trend echoes the deeply rooted need of all humans to be entertained. Stories are illustrative, easily memorable and allow any firm to create stronger emotional bonds with the customers.</p>
             <p>A Nielsen study shows consumers want a more personal connection in the way they gather information. Our brains are far more engaged by storytelling than by cold, hard facts. When reading straight data, only the language parts of our brains work to decode the meaning. But when we read a story, not only do the language parts of our brains light up, but any other part of the brain that we would use if we were actually experiencing what we're reading about becomes activated as well. This means it's far easier for us to remember stories than hard facts.</p>
             <blockquote class="text-quote">
-              <p>Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good. That you can make the world a better place.</code> </p>
+              <p>Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good. That you can make the world a better place. </p>
               <p><cite>Sheryl Sandberg.</cite></p>
             </blockquote>
             <p>Storytelling is a means for sharing and interpreting experiences. Peter L. Berger says human life is narratively rooted, humans construct their lives and shape their world into homes in terms of these groundings and memories. <strong>Stories are universal in that they can bridge cultural, linguistic and age-related divides</strong>. Storytelling can be adaptive for all ages, leaving out the notion of age segregation.
diff --git a/demos/media.html b/demos/media.html
index 4da7f57..38e60a3 100644
--- a/demos/media.html
+++ b/demos/media.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    
     <!-- CLEAN MARKUP = GOOD KARMA.
       Hi source code lover,
       
@@ -12,6 +13,7 @@
       
       Thanks!
       -->
+      
     <!-- SEO -->
     <title>WebSlides Tutorial: Videos, Images, and Maps</title>
     <meta name="description" content="How to embed images, videos, and maps in your presentation.">
@@ -106,7 +108,7 @@
       </nav>
     </header>
     <main role="main">
-      <article id="webslides" class="vertical">
+      <article id="webslides">
         
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
@@ -157,14 +159,15 @@
                 <div>
                   <h3><a target="_blank" href="#slide=15">Videos</a></h3>
                   <ol>
-                    <li><a target="_blank" href="#slide=16">Background Videos</a></li>
+                    <li><a target="_blank" href="#slide=16">Background Videos (hosted)</a></li>
+                    <li><a target="_blank" href="#slide=18">Embed YouTube videos</a></li>
+                    <li><a target="_blank" href="#slide=20">Fullscreen YouTube videos</a></li>
                     <li>
-                      <a target="_blank" href="#slide=18"><strong>YouTube Videos</strong></a>
+                      <a target="_blank" href="#slide=22"><strong>YouTube API:</strong></a>
                       <ol>
-                        <li><a target="_blank" href="#slide=21">Fullscreen</a></li>
-                        <li><a target="_blank" href="#slide=23">No controls</a></li>
-                        <li><a target="_blank" href="#slide=26">Autoplay</a></li>
-                        <li><a target="_blank" href="#slide=28">Loop</a></li>
+                        <li><a target="_blank" href="#slide=23">Autoplay, loop, mute, and no controls</a></li>
+                        <li><a target="_blank" href="#slide=25">Fullscreen video</a></li>
+                        <li><a target="_blank" href="#slide=27">Background video with overlay</a></li>
                       </ol>
                     </li>
                   </ol>
@@ -175,7 +178,7 @@
                 <div>
                   <h3><a target="_blank" href="#slide=30">Maps & Charts</a></h3>
                   <ol>
-                    <li><a target="_blank" href="#slide=31">Embedding Maps</a></li>
+                    <li><a target="_blank" href="#slide=31">Embedding maps</a></li>
                     <li><a target="_blank" href="#slide=32">Fullscreen maps</a></li>
                     <li><a target="_blank" href="#slide=33">Embedding charts</a></li>
                   </ol>
@@ -227,14 +230,14 @@
               <svg class="fa-camera">
                 <use xlink:href="#fa-camera"></use>
               </svg>
-              img.background = Fullscreen Backgrounds
+              .background = Fullscreen Backgrounds
             </h4>
             <p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? &rarr;</a></p>
             <pre>&lt;section&gt;
-	&lt;span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"&gt;&lt;/span&gt;
-	&lt;div class="wrap"&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/div&gt;
+  &lt;span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
             <p>
               <svg class="fa-info">
@@ -392,7 +395,7 @@
           <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <blockquote class="text-quote">
-              <p>"An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism."</p>
+              <p>An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism.</p>
               <p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
             </blockquote>
             <hr>
@@ -459,7 +462,7 @@
               <h2>Screenshots</h2>
               <p>HTML/CSS Browser.</p>
               <pre>&lt;figure class="browser"&gt;
-	&lt;img alt="Screenshot" src="image.png"&gt;
+  &lt;img alt="Screenshot" src="image.jpg"&gt;
 &lt;/figure&gt;</pre>
             </div>
             <!-- .end .content-left -->
@@ -495,23 +498,16 @@
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="bg-black aligncenter">
-          <span class="background dark" style="background-image:url('https://source.unsplash.com/b_xciWkK8Pc/1600x800')"></span>
-          <div class="wrap">
-            <h3>YouTube Videos</h3>
-            <p>Fullscreen, no controls, autoplay, loop, mute...</p>
-          </div>
-          <!-- .end .wrap -->
-        </section>
         <section>
           <div class="wrap">
             <div class="content-left">
               <h3>Responsive Videos</h3>
+              <p>Just copy and paste the code from YouTube to your slide.</p>
               <pre>&lt;div class="embed"&gt;
- &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
- &lt;/iframe&gt;
+ <strong>&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
+ &lt;/iframe&gt;</strong>
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
@@ -529,7 +525,7 @@
           <div class="wrap size-60">
             <!-- Responsive video/iframe... Add <div class="embed"> -->
             <div class="embed">
-              <iframe width="800" height="450" src="https://www.youtube.com/embed/_m67JbGjWnc?list=PL27Ptt5XwkS39IrY8SeNaELghs_NLjMEs" allowfullscreen></iframe>
+              <iframe width="800" height="450" src="https://www.youtube.com/embed/3Q3eITC01Fg" allowfullscreen></iframe>
             </div>
             <!-- .end .embed -->
           </div>
@@ -537,93 +533,138 @@
         </section>
         <section>
           <div class="wrap size-60">
-            <h3>Fullscreen video</h3>
-            <p>Method 1:</p>
-            <pre>&lt;section class="fullscreen"&gt;
+            <h3>Fullscreen YouTube Video</h3>
+            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
   &lt;div class="embed"&gt;
-    &lt;iframe class="background-video" src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
+    &lt;iframe src="https://www.youtube.com/embed/iY05U7GaU5I"&gt;
     &lt;/iframe&gt;
   &lt;/div&gt;
-&lt;/section&gt;
+<strong>&lt;/section&gt;</strong>
 </pre>
-            <p><code>.fullscreen + .embed + iframe.background-video</code></p>
+            <p><code>.fullscreen</code> > <code>.embed</code> (responsive)</p>
           </div>
           <!-- .end .wrap -->
         </section>
         <section class="fullscreen">
           <!-- Fullscreen Video -->
           <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/BzMLA8YIgG0" allowfullscreen></iframe>
+            <iframe width="800" height="450" src="https://www.youtube.com/embed/iY05U7GaU5I" allowfullscreen></iframe>
           </div>
           <!-- .end .embed -->
         </section>
-        <section>
-          <div class="wrap size-60">
-            <h3>Fullscreen video (no controls)</h3>
-            <p>Method 1:</p>
-            <pre>&lt;div class="embed"&gt;
- &lt;iframe class="background-video" src="https://www.youtube.com/embed/F-UO9vMS7AI"&gt;
- &lt;/iframe&gt;
-&lt;/div&gt;</pre>
-            <p><code>.embed + iframe.background-video</code></p>
+        <section class="frame">
+         <p class="aligncenter"><svg class="fa-thumbs-up large">
+                <use xlink:href="#fa-thumbs-up"></use>
+              </svg></p>
+          <div class="wrap size-60 bg-white">
+            <h3><a href="https://developers.google.com/youtube"><svg class="fa-youtube">
+                <use xlink:href="#fa-youtube"></use>
+              </svg> YouTube API</a></h3>
+            <p class="text-intro">Embed videos with <strong>loop, autoplay, and muted</strong> attributes. The video will automatically play when the slide is loaded.</p>
+            
+            <p><strong>You should use a local or a remote server</strong> since the YouTube API doesn't seem to work nicely when using the file directly on the browser.</p>
           </div>
           <!-- .end .wrap -->
         </section>
         <section>
-          <div class="wrap size-60">
-            <h3>Fullscreen video (no controls)</h3>
-            <p>Method 2:</p>
+          <div class="wrap">
+            <h3><svg class="fa-youtube">
+                <use xlink:href="#fa-youtube"></use>
+              </svg>YouTube API Parameters</h3>
+              <p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
+              <hr>
+           <div class="grid">
+            <div class="column">
+             <pre>&lt;div class="embed"&gt;
+  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt; 
+  &lt;/div&gt;</strong>
+&lt;/div&gt;</pre> 
+<p>autoplay + loop</p>
+            </div>
+            <!-- .end .column -->
+            <div class="column">
             <pre>&lt;div class="embed"&gt;
- &lt;iframe src="https://www.youtube.com/embed/F-UO9vMS7AI<strong>?controls=0&amp;showinfo=0</strong>"&gt;
- &lt;/iframe&gt;
+  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt; 
+  &lt;/div&gt;</strong>
 &lt;/div&gt;</pre>
-            <p><code>.embed</code></p>
+<p>autoplay + mute + no controls.</p>
+            </div>
+            <!-- .end .column -->
+           </div>
+           <!-- .end .grid -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="content-left">
+              <h3>YouTube API</h3>
+              <p><code>autoplay + loop</code></p>
+              <pre>&lt;div class="embed"&gt;
+  &lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt; 
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+            </div>
+            <!-- end .content-left -->
+            <div class="content-left">
+              <!-- <div class="embed"> = Responsive -->
+              <div class="embed">
+                <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop></div>
+              </div>
+              <!-- end .embed -->
+            </div>
+            <!-- end .content-left -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-70">
+            <h3><strong>Let's make some magic with the YouTube API</strong></h3>
+            <p>How to make a fullscreen YouTube video? <code>.fullscreen > .embed</code></p>
+              <hr>
+              <pre><strong>&lt;section class="fullscreen"&gt;</strong>
+  &lt;div class="embed"&gt;
+    &lt;div data-youtube data-youtube-id=&quot;dmkwb2KfLW8&quot; <strong>data-autoplay data-loop data-no-controls</strong>&lt;/div&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+<p>The video will automatically play when the slide is loaded.</p>
           </div>
           <!-- .end .wrap -->
         </section>
         <section class="fullscreen">
           <!-- Fullscreen Video -->
           <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/F-UO9vMS7AI?controls=0&amp;showinfo=0" allowfullscreen></iframe>
+            <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls></div>
           </div>
           <!-- .end .embed -->
         </section>
         <section>
-          <div class="wrap size-60">
-            <h3>Video (autoplay)</h3>
-            <pre>&lt;div class="embed"&gt;
- &lt;iframe src="https://www.youtube.com/embed/F-UO9vMS7AI<strong>?autoplay=1</strong>"&gt;
- &lt;/iframe&gt;
-&lt;/div&gt;</pre>
-            <p><code>.embed</code></p>
+          <div class="wrap size-70">
+            <h3><strong>Fullscreen YouTube video background</strong></h3>
+            <p>Overlaying a transparent background on an embedded Youtube video:</p>
+              <hr>
+              <pre><strong>&lt;section class="fullscreen bg-black"&gt;</strong>
+  &lt;div class="embed dark"&gt;
+    &lt;div data-youtube data-youtube-id=&quot;c9psfOxJysw&quot; <strong>data-autoplay data-loop data-mute data-no-controls</strong>&lt;/div&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="fullscreen">
+        <section class="fullscreen bg-blue">
           <!-- Fullscreen Video -->
-          <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/F-UO9vMS7AI?controls=0&amp;showinfo=0&amp;autoplay=1" allowfullscreen></iframe>
+          <div class="embed dark">
+            <div data-youtube data-youtube-id="SomZsr1J7ao" data-autoplay data-loop data-mute data-no-controls></div>
           </div>
           <!-- .end .embed -->
-        </section>
-        <section>
-          <div class="wrap size-60">
-            <h3>Video (loop)</h3>
-            <pre>&lt;div class="embed"&gt;
- &lt;iframe src="https://www.youtube.com/embed/F-UO9vMS7AI<strong>?loop=1</strong>"&gt;
- &lt;/iframe&gt;
-&lt;/div&gt;</pre>
-            <p><code>.embed</code></p>
+          <div class="wrap aligncenter">
+            <h2><strong>Overlay</strong></h2>
+            <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="fullscreen">
-          <!-- Fullscreen Video -->
-          <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/F-UO9vMS7AI?controls=0&amp;showinfo=0&amp;loop=1" allowfullscreen></iframe>
-          </div>
-          <!-- .end .embed -->
-        </section>
         <section class="bg-primary">
           <span class="background-bottom dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/1600x800)"></span>
           <div class="wrap aligncenter">
@@ -632,7 +673,7 @@
                 <use xlink:href="#fa-map"></use>
               </svg>
               Maps & Charts
-            </h3>
+            </h3> 
           </div>
           <!-- .end .wrap -->
         </section>
@@ -648,11 +689,9 @@
         </section>
         <section class="fullscreen frame">
           <div class="embed">
-            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="600" height="450" allowfullscreen></iframe> 
           </div>
           <!-- .end .embed -->
-          </div>
-          <!-- .end .wrap -->
         </section>
         <section>
           <div class="wrap size-60">
@@ -660,37 +699,12 @@
             <!-- Responsive video/iframe/chart... Add <div class="embed"> -->
             <div class="embed">
               <!-- I love Quartz's charts -->
-              <div class="atlas-chart" data-id="H1tz4P9G" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_H1tz4P9G.png" style="max-width: 100%;"></div>
-              <script src="https://www.theatlas.com/javascripts/atlas.js"></script>
+              <div class="atlas-chart" data-id="rJt91kGnx" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_rJt91kGnx.png" style="max-width: 100%;"></div><script src="https://www.theatlas.com/javascripts/atlas.js"></script>
             </div>
             <!-- end .embed -->
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="aligncenter">
-          <!-- .wrap = container (width: 90%) -->
-          <div class="wrap">
-            <h2><strong>Start in Seconds</strong> </h2>
-            <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
-            <p>
-              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
-                <svg class="fa-cloud-download">
-                  <use xlink:href="#fa-cloud-download"></use>
-                </svg>
-                Free Download
-              </a>
-              <span class="try">
-                <a href="https://www.paypal.me/jlantunez/8" title="Good karma :)">
-                  <svg class="fa-paypal">
-                    <use xlink:href="#fa-paypal"></use>
-                  </svg>
-                  Pay what you want.
-                </a>
-              </span>
-            </p>
-          </div>
-          <!-- .end .wrap -->
-        </section>
       </article>
     </main>
     <!--main-->