Using carouFredSel with masonry in Bootstrap 3

SO Fiddle.

by ravimallya

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/masonry/3.1.2/masonry.min.js"></script>
<script src="//cdn.jsdelivr.net/caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>
<div class="container" id="main-content">
    <div class="row masonry">
           <div class="col-lg-3 col-md-3 col-sm-4 masonry-item mrg-20">
                    <img src="http://www.placehold.it/400x525" class="img-responsive" alt="img" />
                </div>
                <div class="col-lg-3  col-md-3 col-sm-4  masonry-item mrg-20">
                    <img src="http://www.placehold.it/400x200" class="img-responsive" alt="img" />
                </div>
                <div class="col-lg-3  col-md-3 col-sm-4 masonry-item mrg-20">
                    <p>Phasellus felis mi, imperdiet eu vestibulum commodo, viverra at leo. Proin interdum vehicula sapien vitae ultricies. Donec at leo blandit, malesuada nisi vitae, molestie odio. Phasellus pellentesque neque eu felis aliquet laoreet. Etiam ultricies, ligula nec tristique vulputate, nisi ipsum imperdiet lorem, vel molestie ligula justo vitae nulla. Vivamus a scelerisque enim. Nulla lacinia sed elit at laoreet.</p>
                </div>
                <div class="col-lg-3  col-md-3 col-sm-4 masonry-item mrg-20">
                    <img src="http://www.placehold.it/400x200" class="img-responsive" alt="img" />
                </div>
                <div class="col-lg-3  col-md-3 col-sm-4 masonry-item mrg-20">
                    <img src="http://www.placehold.it/400x300" class="img-responsive" alt="img" />
                </div>
                <div class="col-lg-6  col-md-4 col-sm-2 masonry-item mrg-20">
                    <div class="flex-video widescreen">
                        <iframe src="//www.youtube.com/embed/3pAnRKD4raY" frameborder="0"...

CSS

.flex-video {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
    margin-bottom: 16px;
    overflow: hidden;
}
.flex-video.widescreen {
    padding-bottom: 57.25%;
}
.flex-video.vimeo {
    padding-top: 0;
}
.flex-video iframe, .flex-video object, .flex-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
    .flex-video {
        padding-top: 0;
    }
}
.mrg-20 {
    margin-bottom:20px;
}

JavaScript

$(window).load(function () {
    var $container = $('.masonry');
    // initialize
    $container.masonry({
        columnWidth: '.masonry-item',
        itemSelector: '.masonry-item'
    });
    $container.masonry('on', 'layoutComplete', function () {
          $container.css('float', 'left');
    });
    
        $("#main-content").carouFredSel({
            width: "100%",
            height: "auto",
            items: {
                visible: 1,
                minimum: 1,
                width: "100%",
                height: "100%"
            },
            scroll: {
                items: 1,
                fx: "fade",
                easing: "linear",
                pauseOnHover: true
            },
            auto: {
                progress: "#progress"
            },
            prev: "left",
            next: "right"
        });
});