adds media object links and vid times

diff --git a/docs/pages/media-object.md b/docs/pages/media-object.md
index 87f348ef8001ecd915e6c6f2af8cbc38654aa8b4..2dd3e35a7e7656c09f4b7835eec422b287ccf458 100644 (file)
--- a/docs/pages/media-object.md
+++ b/docs/pages/media-object.md
@@ -8,7 +8,13 @@ flex: true
 
 ## Basics
 
-A media object is a container with the class `.media-object`, and two or three sections with the class `.media-object-section`.
+Foundation's Media Object will help you create this common repeatable pattern and can be used several different ways. A media object is a container with the class `.media-object`, and two or three sections with the class `.media-object-section`.
+
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="1:58"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/NjzbEG?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
 
 ```html_example
 <div class="media-object">
@@ -48,6 +54,12 @@ A media object is a container with the class `.media-object`, and two or three s
 
 Each section aligns to the top by default, but individual sections can also be middle- or bottom-aligned with the `.middle` and `.bottom` classes.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="3:33"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/aWKpOj" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="media-object">
   <div class="media-object-section middle">
@@ -96,6 +108,12 @@ In flexbox mode, you can use the <a href="flexbox.html#helper-classes">flexbox h
 
 By adding the `.stack-for-small` class, you can make your media object responsive. Images will get a width of 100%, but this can be changed.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="5:45"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/JNZEKe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="media-object stack-for-small">
   <div class="media-object-section">
@@ -116,6 +134,8 @@ By adding the `.stack-for-small` class, you can make your media object responsiv
 
 By nesting a media object into the media-object-section section, you can easily indent it. This is great for comment strings.
 
+<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/aWKpOj" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <div class="media-object">
   <div class="media-object-section">