From 597b71f18ef3d0544d7d7cb57bc8df0917cdace7 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Thu, 14 Apr 2016 19:11:26 +0800
Subject: add responsive video code

---
 index.html | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index c74968c..f7a2d0f 100644
--- a/index.html
+++ b/index.html
@@ -138,7 +138,7 @@
                     <a href="#tables" class="btn btn-primary">tables</a>
                     <a href="#buttons" class="btn btn-primary">buttons</a>
                     <a href="#forms" class="btn btn-primary">forms</a>
-                    <a href="#images" class="btn btn-primary">images</a>
+                    <a href="#media" class="btn btn-primary">media</a>
                 </div>
             </section>
         </section>
@@ -769,26 +769,37 @@
 
         </section>
 
-        <section id="images" class="grid-960">
-            <header class="text-center"><h4>images</h4></header>
+        <section id="media" class="grid-960">
+            <header class="text-center"><h4>media</h4></header>
             <section class="notes">
-                <p><strong>Images</strong> include responsive image class. </p>
+                <p><strong>Media</strong> include responsive image and video class. </p>
             </section>
             <div class="columns">
                 <div class="column col-6">
                     <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" />
                 </div>
+            </div>
+            <section class="notes">
+                <p>Add the class <code class="label">img-responsive</code> to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
+            </section>
+            <div class="columns">
                 <div class="column col-6">
-                    <img src="demo/img/osx-el-capitan-2.jpg" class="img-responsive rounded hide-sm" />
+                    <div class="video-responsive">
+                        <iframe src="https://www.youtube.com/embed/vBfBa-gCMQk" width="560" height="315" frameborder="0" allowfullscreen></iframe>
+                    </div>
                 </div>
             </div>
             <section class="notes">
-                <p>Add the class <code class="label">img-responsive</code> to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
+                <p>For responsive video, add a container with the class <code class="label">video-responsive</code>. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9.</p>
             </section>
 
-            <!-- images example -->
+            <!-- media example -->
 <pre class="code lang-html">
 &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> /&gt;
+
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;video-responsive&quot;</span>&gt;
+    &lt;<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">&quot;https://www.youtube.com/embed/vBfBa-gCMQk&quot;</span> <span class="atn">width</span>=<span class="atv">&quot;560&quot;</span> <span class="atn">height</span>=<span class="atv">&quot;315&quot;</span> <span class="atn">frameborder</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">allowfullscreen</span>&gt;&lt;<span class="tag">/iframe</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
 </pre>
 
         </section>
-- 
cgit v1.3.1-23-gd82d