diff --git a/demos/classes.html b/demos/classes.html
index afb40ab..b62444f 100644
--- a/demos/classes.html
+++ b/demos/classes.html
@@ -767,10 +767,10 @@
             <div class="content-left">
               <h3>Fullscreen Background Images</h3>
               <pre>&lt;section&gt;
-	&lt;span class="background" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"&gt;&lt;/span&gt;
-	&lt;section&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/section&gt;
+  &lt;span <strong>class="background"</strong> style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
               <p>How to <a href="https://source.unsplash.com/">embed Unsplash photos</a>?</p>
             </div>
diff --git a/demos/components.html b/demos/components.html
index 154750b..87e1a1a 100644
--- a/demos/components.html
+++ b/demos/components.html
@@ -2813,12 +2813,13 @@
         <section>
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes.</p>
               <pre>&lt;div class="embed"&gt;
  &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
  &lt;/iframe&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
@@ -2836,7 +2837,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>
+              <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
             </div>
             <!-- .end .embed -->
           </div>
@@ -3013,7 +3014,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.png"&gt;
 &lt;/figure&gt;</pre>
             </div>
             <!-- .end .content-left -->
@@ -3031,7 +3032,7 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
diff --git a/demos/keynote.html b/demos/keynote.html
index 1860444..de83040 100644
--- a/demos/keynote.html
+++ b/demos/keynote.html
@@ -722,7 +722,7 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -736,17 +736,18 @@
         <section class="bg-apple">
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.</p>
               <pre>&lt;div class="embed"&gt;
  &lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay &gt;&lt;/div&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
               <!-- <div class="embed"> = Responsive -->
               <div class="embed">
-                <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay></div>
+                <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-no-controls></div>
               </div>
               <!-- end .embed -->
             </div>
@@ -757,26 +758,31 @@
         <section class="bg-apple fullscreen">
           <!-- Fullscreen Video -->
           <div class="embed">
-            <div data-youtube data-youtube-id="F-UO9vMS7AI" data-autoplay></div>
+            <div data-youtube data-youtube-id="lvOKBQvbLhg" data-autoplay></div>
           </div>
           <!-- .end .embed -->
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+        <section class="fullscreen bg-apple aligncenter">
+         <div class="embed">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
+           </video>
+          </div><!-- .embed -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>Be Awesome</strong></h2>
           </div>
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
-            <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
+        <section class="fullscreen bg-black aligncenter">
+          <div class="embed dark">
+             <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+            </video>
+          </div><!-- .embed -->
           <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>Think Different</strong></h2>
-            <p>0verlay: <code>.bg-black > .background-video.dark</code> or .light</p>
+            <p>Overlay: <code>fullscreen.bg-black > .embed.dark</code> or .light</p>
           </div>
           <!-- .end .wrap -->
         </section>
diff --git a/demos/landings.html b/demos/landings.html
index 3cd6d13..553f0dc 100644
--- a/demos/landings.html
+++ b/demos/landings.html
@@ -1736,7 +1736,7 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1808,12 +1808,13 @@
         <section>
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes.</p>
               <pre>&lt;div class="embed"&gt;
  &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
  &lt;/iframe&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
@@ -1831,7 +1832,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/vXeF6Uot8pk?list=PL27Ptt5XwkS3YU7n0p7Qer2j_DhTSi0jW" allowfullscreen></iframe>
+              <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
             </div>
             <!-- .end .embed -->
           </div>
@@ -1840,28 +1841,32 @@
         <section class="fullscreen">
           <!-- Fullscreen Video -->
           <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/b4LrTkWq9jU" allowfullscreen></iframe>
+            <div data-youtube data-youtube-id="b4LrTkWq9jU" data-autoplay></div>
           </div>
           <!-- .end .embed -->
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
-            <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
+        <section class="fullscreen bg-black aligncenter">
+         <div class="embed">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+              <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+           </video>
+          </div><!-- .end .embed -->
           <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Every end is a new beginning</strong></h2>
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="bg-blue aligncenter">
-          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
-            <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
+        <section class="fullscreen bg-blue aligncenter">
+         <div class="embed dark">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+           </video>
+          </div><!-- .end .embed -->
           <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Overlay</strong></h2>
-            <p><code>section.bg-blue > .background-video.dark</code> or .light</p>
+            <p><code>section.fullscreen.bg-blue > .embed.dark</code> or .light</p>
           </div>
           <!-- .end .wrap -->
         </section>
diff --git a/demos/media.html b/demos/media.html
index 5417a96..bc33922 100644
--- a/demos/media.html
+++ b/demos/media.html
@@ -341,10 +341,10 @@
             <h1 class="text-landing text-shadow">Opacity</h1>
             <p><code>[class*="bg-"] > .background.light</code></p>
             <pre>&lt;section class="bg-black"&gt;
-	&lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
-	&lt;div class="wrap"&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/div&gt;
+  &lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
           </div>
         </section>
@@ -354,10 +354,10 @@
             <h1 class="text-landing text-shadow">Opacity</h1>
             <p><code>[class*="bg-"] > .background.dark</code></p>
             <pre>&lt;section class="bg-black"&gt;
-	&lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
-	&lt;div class="wrap"&gt;
-		&lt;h1&gt;Slide&lt;/h1&gt;
-	&lt;/div&gt;
+  &lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
 &lt;/section&gt;</pre>
           </div>
         </section>
diff --git a/demos/portfolios.html b/demos/portfolios.html
index 6957b27..f4705c3 100644
--- a/demos/portfolios.html
+++ b/demos/portfolios.html
@@ -1618,7 +1618,7 @@
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;</pre>
-            <p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
+            <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1719,12 +1719,13 @@
         <section>
           <div class="wrap">
             <div class="content-left">
-              <h3>Responsive Videos</h3>
+              <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
+              <p>Embed videos with loop, autoplay, and muted attributes.</p>
               <pre>&lt;div class="embed"&gt;
  &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
  &lt;/iframe&gt;
 &lt;/div&gt;</pre>
-              <p><code>.embed</code></p>
+              <p><code>.embed</code> (responsive)</p>
             </div>
             <!-- end .content-left -->
             <div class="content-left">
@@ -1742,7 +1743,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/vXeF6Uot8pk?list=PL27Ptt5XwkS3YU7n0p7Qer2j_DhTSi0jW" allowfullscreen></iframe>
+              <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
             </div>
             <!-- .end .embed -->
           </div>
@@ -1751,28 +1752,33 @@
         <section class="fullscreen">
           <!-- Fullscreen Video -->
           <div class="embed">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/b4LrTkWq9jU" allowfullscreen></iframe>
+            <div data-youtube data-youtube-id="b4LrTkWq9jU" data-autoplay></div>
           </div>
           <!-- .end .embed -->
         </section>
-        <section class="bg-black aligncenter">
-          <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+        <section class="fullscreen bg-black aligncenter">
+         <div class="embed">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
+           </video>
+          </div><!-- .end .embed -->
           <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>We build brands with integrity and substance</strong></h2>
           </div>
           <!-- .end .wrap -->
         </section>
-        <section class="bg-blue">
-          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+        <section class="fullscreen bg-blue">
+         <div class="embed dark">
+           <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
-          </video>
+           </video>
+          </div>
+          <!-- .embed -->
           <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>We help with design direction</strong></h2>
-            <p>0verlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>
+            <p>0verlay: <code>section.fullscreen.bg-blue > .embed.dark</code> or .light</p>
           </div>
           <!-- .end .wrap -->
         </section>