title: How to create this bootstrap carousel of iframes?
body: <p>Can I use Bootstrap to create a carousel of video's (iframe's) with the layout as below?</p>
  
  <p><a href="https://i.stack.imgur.com/XxMQ2.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XxMQ2.gif" alt="desired carousel"></a></p>
  
  <p>The code that I'm currently using is below. The problem is that:</p>
  
  <ul>
  <li>the carousel indicators are displayed on top of the video (makes them hard to see) instead of below it.</li>
  <li><p>the carousel automatically goes to the next video after a few seconds. Instead I would like the carousel to only go to the next video if the visitor clicks on the carousel indicator.</p>
  
  <pre><code>&lt;div id="carouselvideo" class="carousel slide" data-ride="carousel"&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carouselvideo" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carouselvideo" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carouselvideo" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx?rel=0&amp;amp;showinfo=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx?rel=0&amp;amp;showinfo=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx?rel=0&amp;amp;showinfo=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre></li>
  </ul>