From e15f24018a8ea43ecd366a5f4445098eefa0855e Mon Sep 17 00:00:00 2001
From: Nick Magee <nickmagee@Nicks-MacBook-Pro-4.local>
Date: Tue, 30 May 2017 14:53:50 -0700
Subject: [PATCH] Replaces old videos with new videos on 5 docs pages

---
 docs/pages/accordion-menu.md |  4 ++--
 docs/pages/button.md         | 12 ++++++------
 docs/pages/callout.md        |  8 ++++----
 docs/pages/drilldown-menu.md | 10 +++++-----
 docs/pages/dropdown-menu.md  |  4 ++--
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/docs/pages/accordion-menu.md b/docs/pages/accordion-menu.md
index efd52c85c..1d099d86b 100644
--- a/docs/pages/accordion-menu.md
+++ b/docs/pages/accordion-menu.md
@@ -3,7 +3,7 @@ title: Accordion Menu
 sass: scss/components/_accordion-menu.scss
 js: js/foundation.accordionMenu.js
 description: Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.
-video: yPGdaMRx60w
+video: FXZIZ9N4aeI
 ---
 
 ## Basics
@@ -12,7 +12,7 @@ Accordion menus follow the basic [Menu](menu.html) syntax of `<ul>`, `<li>`, and
 
 Any `<a>` will behave like a standard link. However, any `<a>` paired with a nested `<ul>` menu will then slide that sub-menu up and down when clicked on.
 
-<a class="" data-open-video="0:29"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+<a class="" data-open-video="1:03"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 
 <div class="primary callout">
   <p>You can use the built-in <code>.nested</code> class to add an indent to a nested menu.</p>
diff --git a/docs/pages/button.md b/docs/pages/button.md
index 049fb1418..e603736e0 100644
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -1,7 +1,7 @@
 ---
 title: Button
 description: Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.
-video: Qe8KHC2ZtMM
+video: iEAtuFk4-LQ
 sass: scss/components/_button.scss
 tags:
   - dropdown button
@@ -14,7 +14,7 @@ A basic button can be created with minimal markup. Because buttons can be used f
 - Use the `<a>` tag if the button is a link to another page, or a link to an anchor within a page. Generally anchors don't require JavaScript to work.
 - Use the `<button>` tag if the button performs an action that changes something on the current page. `<button>` elements almost always require JavaScript to function.
 
-<a class="" data-open-video="0:51"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+<a class="" data-open-video="0:34"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 <div class="primary callout">
   <p>Add the attribute <code>type="button"</code> to <code>&lt;button&gt;</code> elements, unless the button submits a form, in which case you use <code>type="submit"</code></p>
 </div>
@@ -40,7 +40,7 @@ A basic button can be created with minimal markup. Because buttons can be used f
 Additional classes can be added to your button to change its size and shape.
 
 <p>
-  <a class="" data-open-video="2:08"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="3:23"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -63,7 +63,7 @@ Additional classes can be added to your button to change its size and shape.
 Add color classes to give buttons additional meaning.
 
 <p>
-  <a class="" data-open-video="2:52"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="5:41"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 
@@ -129,7 +129,7 @@ The text color for each button class is determined by either `$button-color` or
 The `.disabled` class will give buttons a faded appearance. The class is a purely visual style, and won't actually disable a control. For `<button>` elements, you can add the `disabled` attribute to both disable and style it. If you want to disable a link, you should add the `aria-disabled` attribute to mark it as disabled for assistive technology.
 
 <p>
-  <a class="" data-open-video="3:19"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="8:32"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-video-codepen-container">
@@ -152,7 +152,7 @@ The `.disabled` class will give buttons a faded appearance. The class is a purel
 Add the `.hollow` class to a button to give it a hollow style. Change the `$button-fill` variable in your settings file to `hollow` to make this the default style. Changing this setting will remove the `.hollow` class from your CSS.
 
 <p>
-  <a class="" data-open-video="4:04"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="7:37"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 
diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index e2692b6a7..b32c71ff5 100644
--- a/docs/pages/callout.md
+++ b/docs/pages/callout.md
@@ -1,7 +1,7 @@
 ---
 title: Callout
 description: Callouts combine panels and alerts from Foundation 5 into one generic container component.
-video: nUrs8Z8sTBg
+video: yQdu0oSuaCo
 sass: scss/components/_callout.scss
 tags:
   - panel
@@ -13,7 +13,7 @@ tags:
 A callout is just an element with a `.callout` class applied. You can put any kind of content inside.
 
 <p>
-  <a class="" data-open-video="0:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="0:33"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -35,7 +35,7 @@ A callout is just an element with a `.callout` class applied. You can put any ki
 Callouts can be colored using the `.secondary`, `.primary`, `.success`, `.warning`, or `.alert` classes. Links inside the callout will be tinted to match the color of the callout.
 
 <p>
-  <a class="" data-open-video="1:25"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="2:02"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -110,7 +110,7 @@ Callouts can be sized using the `.small` and `.large` classes. These will affect
 
 Pair the callout with the [close button](close-button.html) component and `data-closable` attribute to create a dismissable alert box.
 
-<a class="" data-open-video="2:24"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+<a class="" data-open-video="4:47"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 <div class="primary callout">
   <p>Any element can be used as a close trigger, not just close button. Adding the attribute <code>data-close</code> to any element within the callout will turn it into a close trigger.</p>
   <p>When using the <code>data-closable</code> attribute, you can optionally add <a href="http://foundation.zurb.com/sites/docs/motion-ui.html">Motion UI</a> classes to the attribute to change the closing animation. If no class is added, the plugin defaults to jQuery's <code>.fadeOut()</code> function.</p>
diff --git a/docs/pages/drilldown-menu.md b/docs/pages/drilldown-menu.md
index 70816c6db..5de233703 100644
--- a/docs/pages/drilldown-menu.md
+++ b/docs/pages/drilldown-menu.md
@@ -1,7 +1,7 @@
 ---
 title: Drilldown Menu
 description: Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.
-video: risWADXGMYs
+video: 8qPQRXl52hI
 scss: scss/components/_drilldown.scss
 js: js/foundation.drilldown.js
 ---
@@ -15,7 +15,7 @@ To create sub-menus, place a `<ul>` *next to* an `<a>`. Clicking that `<a>` will
 Any `<a>` without a submenu will function like a normal link.
 
 <p>
-  <a class="" data-open-video="0:30"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="0:54"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -90,14 +90,14 @@ Any `<a>` without a submenu will function like a normal link.
 </div>
 
 <p>
-<a class="" data-open-video="3:27"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+<a class="" data-open-video="4:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/mmKyrw?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
 
-```html 
+```html
 <ul class="menu" data-drilldown data-auto-height="true" data-animate-height="true">
   <!--  -->
 </ul>
@@ -175,7 +175,7 @@ Any `<a>` without a submenu will function like a normal link.
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/jmKEwX?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
 
-```html 
+```html
 <ul class="menu" data-drilldown data-scroll-top="true">
   <!--  -->
 </ul>
diff --git a/docs/pages/dropdown-menu.md b/docs/pages/dropdown-menu.md
index 199af69ed..7ad1ce99f 100644
--- a/docs/pages/dropdown-menu.md
+++ b/docs/pages/dropdown-menu.md
@@ -1,7 +1,7 @@
 ---
 title: Dropdown Menu
 description: Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.
-video: 'qDybCaxK3bA'
+video: 'KfnRuKBKrbw'
 sass: scss/components/_dropdown-menu.scss
 js: js/foundation.dropdownMenu.js
 ---
@@ -21,7 +21,7 @@ Dropdown menus build on the [Menu](menu.html) component's syntax. Add the class
 
 To create dropdown menus, nest a new `<ul>` inside an `<li>`. You can nest further to create more levels of dropdowns.
 
-<a class="" data-open-video="0:33"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+<a class="" data-open-video="0:53"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 
 <div class="primary callout">
   <p>Note that the <code>&lt;ul&gt;</code> goes <em>after</em> the <code>&lt;a&gt;</code>, and not inside of it.</p>
-- 
2.47.2