<script src="https://code.jquery.com/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

​

<div class="container">

  <div class="row">

    <div class="col-xs-9">

      <ul class="playlist-viewport">

    <li id="video-1" class="video active">

        <div class="embed-responsive embed-responsive-16by9">

          <video class="embed-responsive-item" controls="controls" 

               poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" >

            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />

            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />

            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />

​

            <object type="application/x-shockwave-flash" 

                    data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" 

                    width="640" height="360">

                <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />

                <param name="allowFullScreen" value="true" />

                <param name="wmode" value="transparent" />

                <param name="flashVars" 

                       value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />

                <img alt="Big Buck Bunny" 

                     src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" 

                     width="640" height="360" 

                     title="No video playback capabilities, please download the video below" />

            </object>

        </video>

      </div>

    </li>

    <li id="video-2" class="video">

      <div class="embed-responsive embed-responsive-16by9">

        <video class="embed-responsive-item" controls="controls" >

            <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>

            <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 

            <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 

​

            <object type="application/x-shockwave-flash" 

                    data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" 

                    width="640" height="360">

                <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />

                <param name="allowFullScreen" value="true" />

                <param name="wmode" value="transparent" />

                <param name="flashVars" 

                       value="config={'playlist':[{'url ':'http%3A%2F%2Ftechslides.com%2Fdemos%2Fsample-videos%2Fsmall.mp4','autoPlay':false}]}" />

            </object>

        </video>

        </div>

    </li>

</ul>

    </div>

    <div class="col-xs-3">

      <ul class="list-group">

        <a href="#video-1" class="list-group-item playlist-item">

          Big Buck Bunny

        </a>

        <a href="#video-2" class="list-group-item playlist-item">

          Outro vídeo

        </a>

      </ul>

    </div>

  </div>

</div>

​