Can I use Bootstrap to create a carousel of video's (iframe's) with the layout as below?

The code that I'm currently using is below. The problem is that:

• the carousel indicators are displayed on top of the video (makes them hard to see) instead of below it.

• 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.

  <div id="carouselvideo" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselvideo" data-slide-to="0" class="active"></li>
      <li data-target="#carouselvideo" data-slide-to="1"></li>
      <li data-target="#carouselvideo" data-slide-to="2"></li>
    </ol>
  
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <iframe width="250" height="250" src=";amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="item">
        <iframe width="250" height="250" src=";amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="item">
        <iframe width="250" height="250" src=";amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
  

Can I use Bootstrap to create a carousel of video's (iframe's) with the layout as below?

The code that I'm currently using is below. The problem is that:

• the carousel indicators are displayed on top of the video (makes them hard to see) instead of below it.

• 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.

  <div id="carouselvideo" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselvideo" data-slide-to="0" class="active"></li>
      <li data-target="#carouselvideo" data-slide-to="1"></li>
      <li data-target="#carouselvideo" data-slide-to="2"></li>
    </ol>
  
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <iframe width="250" height="250" src="https://www.youtube-nocookie./embed/xxx?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="item">
        <iframe width="250" height="250" src="https://www.youtube-nocookie./embed/xxx?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="item">
        <iframe width="250" height="250" src="https://www.youtube-nocookie./embed/xxx?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
  

• javascript
• html
• css
• twitter-bootstrap

1 Answer 1

Yes, you can do what you are asking. Simply move this:

<ol class="carousel-indicators">
    <li data-target="#carouselvideo" data-slide-to="0" class="active"></li>
    <li data-target="#carouselvideo" data-slide-to="1"></li>
    <li data-target="#carouselvideo" data-slide-to="2"></li>
  </ol>

Out of the <div id="carouselvideo"> container. As long as the data-target points to #carouselvideo, the ol can be anywhere on your page.

For the JS, you would set the option for interval to false

$("#carouselvideo").carousel({interval: false});