jquery isotope with responsive twitter bootstrap

Question

I am using Bootstrap 3, and have been having trouble getting a video gallery with the same width and height, but the videos are responsive to work.

CSS:

video{
  width:100%;
  height:auto;
}

I am using the Bootstrap 3 to make it responsive, eg. with a large screen 3 videos are shown in a row, and on a tablet, 2 videos are shown. Everything works great until I apply Isotope, then my video/images get wonky, they appear in different sizes.

I can't seem to figure out what is going on. I've tried the suggestion on this, didnt seem to work as well. Any help is appreciated. Thank you.

HTML:

<div class="content container">

        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div id="isotope">
                    <div id="topbar">   
                        <div id="filters">
                            <p>Sort by:</p>

                            <div class="section" id="utensils">
                                <ul>
                                    <li>
                                        <input type="checkbox" name="hands" value=".hands" id="hands"></input><label for="hands">Hands</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" name="fork" value=".fork" id="fork"></input><label for="fork">Fork</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" name="spoon" value=".spoon" id="spoon"></input><label for="spoon">Spoon</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" name="knife" value=".knife" id="knife"></input><label for="knife">Knife</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" name="chopsticks" value=".chopsticks" id="chopsticks"></input><label for="chopsticks">Chopsticks</label>
                                    </li>
                                </ul>
                            </div>


                        </div> <!-- end #filters -->
                    </div> <!-- end #topbar -->
                </div> <!-- end #kitchennav -->
            </div>
        </div>

        <div id="act2_content">
            <div class="col-md-1 col-sm-1 right-col"> 
            </div>

            <div class="col-md-10 col-sm-10">
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <div class="item chopsticks hamburger shake">
                            <video width="300" height="auto" id="myvideo4"><source src="videos/b_cs.mp4" type="video/mp4"></video>
                         </div>
                    </div>

                    <div class="col-sm-6 col-md-4">
                        <div class="item hands cupcake shake">
                            <video width="300" height="auto" id="myvideo5"><source src="videos/cc_h.mp4" type="video/mp4"></video>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-4">
                        <div class="item spoon cupcake shake">
                            <video width="300" height="auto" id="myvideo7"><source src="videos/cc_s.mp4" type="video/mp4"></video>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-4">  
                        <div class="item chopsticks cupcake shake">
                            <video width="300" height="auto" id="myvideo8"><source src="videos/cc_cs.mp4" type="video/mp4"></video>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-4">
                        <div class="item hands icecream shake">
                            <video width="300" height="auto" id="myvideo9"><source src="videos/ic_h.mp4" type="video/mp4"></video>
                        </div>
                    </div>


                </div>
            </div>

            <div class="col-md-1 col-sm-1 right-col"> 
            </div>

        </div>
    </div>

JQuery:

$(function(){

  var $container = $('#act2_content'),
      $checkboxes = $('#filters input');

    $container.imagesLoaded(function(){
        $container.isotope({
            itemSelector: '.item'
        });
    });

  $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join('');
    $container.isotope({ filter: filters });
  });

  $('#shuffle').click(function(){
    $container.isotope('shuffle');
  });

  var $items = $container.children();

  $items.click(function(){
    var idx = $(this).index();

    var $isoItem = $(this),
        $filteredAtoms = $container.data('isotope').$filteredAtoms,
        isoIndex = $filteredAtoms.index( this ),
        nextIndex = ( isoIndex + 1 ) % $filteredAtoms.length;

    $items.filter('.next').removeClass('next');
    $filteredAtoms.eq( nextIndex ).addClass('next');

  });

});