Add video links on tabs

diff --git a/docs/pages/tabs.md b/docs/pages/tabs.md
index 20e90683f558e56dedf687d93b05c39a712d23cd..ccf7bd8b28f03104c558d0988d638bf368d6c35b 100644 (file)
--- a/docs/pages/tabs.md
+++ b/docs/pages/tabs.md
@@ -20,7 +20,7 @@ There are two pieces to a tabbed interface: the tabs themselves, and the content
 The tab content container has the class `.tabs-content`, while each section has the class `.tabs-panel`. Each content pane also has a unique ID, which is targeted by a link in the tabstrip.
 
 <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:50"><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">
@@ -83,7 +83,7 @@ Put it all together, and we get this:
 Add the `.vertical` class to a tabstrip to stack tabs vertically. You can also place the tabstrip and the tab contents in a grid to make them sit side-by-side.
 
 <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="3:46"><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">
@@ -139,10 +139,6 @@ Add the `.vertical` class to a tabstrip to stack tabs vertically. You can also p
 
 Add the attribute `data-active-collapse="true"` to a tabstrip to collapse active tabs.
 
-<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>
-</p>
-
 <div class="docs-codepen-container">
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/LyrJQZ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/codepen-button.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
@@ -187,6 +183,10 @@ Add the attribute `data-deep-link="true"` to a tabstrip to:
 - modify the browser history when a tab is clicked
 - allow users to open a particular tab at page load with a hash-appended URL
 
+<p>
+  <a class="" data-open-video="5:14"><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>
+
 ```html_example
 <ul class="tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge="500" data-tabs id="deeplinked-tabs">
   <li class="tabs-title is-active"><a href="#panel1d" aria-selected="true">Tab 1</a></li>