updates video links for pagination switch closebutton

diff --git a/docs/pages/close-button.md b/docs/pages/close-button.md
index 60a9f98b719c07388a39310dc4491618f4abc51e..87a0510a90f9ada6026914a341ecc317fe1ac2be 100644 (file)
--- a/docs/pages/close-button.md
+++ b/docs/pages/close-button.md
@@ -1,7 +1,7 @@
 ---
 title: Close Button
 description: The humble close button can be used anywhere you need something to go away on click.
-video: '8CDk9lUAbUM'
+video: '0cvJbo7ItpU'
 sass: scss/components/_close-button.scss
 ---
 
@@ -10,7 +10,7 @@ A close button is a `<button>` element with the class `.close-button`. We use th
 The button is also labeled with `aria-label` to clarify what the button's purpose is.
 
 <p>
-  <a class="" data-open-video="1: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="1:07"><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">
@@ -34,13 +34,14 @@ The button is also labeled with `aria-label` to clarify what the button's purpos
   <p>The close button on its own doesn't close elements, but you can use it with <a href="toggler.html">Toggler</a>, <a href="reveal.html">Reveal</a>, <a href="off-canvas.html">Off-canvas</a>, and other plugins that have open and close behaviors.</p>
 </div>
 
-<a class="" data-open-video="1: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>
 <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>
 </div>
 
 The below example pairs the callout with the close button component and `data-closable` attribute to create a dismissible alert box.
 
+<a class="" data-open-video="4: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>
+
 <div class="docs-codepen-container">
   <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/JNvEox?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>

diff --git a/docs/pages/pagination.md b/docs/pages/pagination.md
index 69429cd3eeb9bda3080382dffe115ac21df378ee..10d3e1b7095dc09fb8a8f8bd5a9d5f239a52769e 100644 (file)
--- a/docs/pages/pagination.md
+++ b/docs/pages/pagination.md
@@ -1,7 +1,7 @@
 ---
 title: Pagination
 description: Pagination is a type of navigation that lets users click through pages of search results, products, or other related items.
-video: 'zyk8c6-SpLU'
+video: '9gcGADHzz9o'
 sass: scss/components/_pagination.scss
 ---
 
@@ -14,7 +14,7 @@ Note that the container has the attributes `role="navigation"` and `aria-label="
 Extra screen reader-only text should also be added to a pagination element. In the below example, users reading the page will just see "Next" and "Previous", but screen readers will read it as "Next page" and "Previous page". Additionally, the text for the current page will read as "You're on page one".
 
 <p>
-  <a class="" data-open-video="1: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>
+  <a class="" data-open-video="0: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>
 </p>
 
 <div class="docs-codepen-container">
@@ -41,6 +41,9 @@ Extra screen reader-only text should also be added to a pagination element. In t
 
 The items in a pagination list are `display: inline-block`, which makes centering them easy. Use our built-in `.text-center` class, or add `text-align: center` in your CSS.
 
+<p>
+  <a class="" data-open-video="7:20"><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/dWKYZb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>

diff --git a/docs/pages/switch.md b/docs/pages/switch.md
index 2b473a68003c2ec84b7e37c49a7d18047cd75e0f..0a18d325eb70afc224c3baca13b2e8823df6062c 100644 (file)
--- a/docs/pages/switch.md
+++ b/docs/pages/switch.md
@@ -1,7 +1,7 @@
 ---
 title: Switch
-description: Now you can tell your users to flip the switch or switch off.
-video: '25NIiOhwGNQ'
+description: Create pure CSS3 On/Off switches with animated transitions. Now you can tell your users to flip the switch or switch off.
+video: 'AEL2Mj0DT3o'
 sass: scss/components/_switch.scss
 ---
 
@@ -24,7 +24,7 @@ Give the `<input>` a unique ID and point the `<label>` to it with the `for` attr
 </div>
 
 <p>
-  <a class="" data-open-video="0:18"><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: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>
 </p>
 
 <div class="docs-codepen-container">
@@ -47,7 +47,7 @@ Give the `<input>` a unique ID and point the `<label>` to it with the `for` attr
 You can also use `<input type="radio">` instead of `checkbox` to create a series of options.
 
 <p>
-  <a class="" data-open-video="1:48"><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:17"><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">
@@ -84,7 +84,7 @@ You can also use `<input type="radio">` instead of `checkbox` to create a series
 Use the classes `.tiny`, `.small`, or `.large` to change the switch size.
 
 <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="6: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>
 </p>
 
 <div class="docs-codepen-container">
@@ -126,7 +126,7 @@ Active/inactive text goes inside of the switch's `<label>`.
   <p>Depending on the length of the words you place inside the switch, you may need to fine-tune the <code>left</code> or <code>right</code> CSS properties of the text to get it positioned right.</p>
 </div>
 
-<a class="" data-open-video="2: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="8:07"><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 <code>aria-hidden="true"</code> to these labels to prevent AT from reading them.</p>