isotope and youtube videos

by Peter Aad

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="result"></div>
<div class="clearfix" style="padding:10px">
    <div style="float:left;width:50%;"> <span>Filter:</span>

        <div class="button-group filter-button-group">
            <button class="btn" data-filter="*">All</button>
            <button class="btn" data-filter=".hearing-loss">Hearing Loss</button>
            <button class="btn" data-filter=".storyteller">Storyteller</button>
            <button class="btn" data-filter=".solution">Solution</button>
        </div>
    </div>
    <div style="float:right;width:50%"> <span>Sort:</span>

        <div class="button-group sort-by-button-group">
            <button class="btn" data-sort-value="title">Title</button>
            <button class="btn" data-sort-value="date">Newest</button>
            <button class="btn" data-sort-value="popular">Popular</button>
        </div>
    </div>
</div>
<div id="grid">
    <div class="grid-sizer"></div>
    <div class="element-item hearing-loss" id="Jc-FGXBejZg"></div>
    <div class="element-item storyteller" id="vecKZj8iVSY"></div>
    <div class="element-item solution" id="AZVzK6rGIYo"></div>
    <div class="element-item hearing-loss" id="UqIbO_Uu_ds"></div>
    <div class="element-item storyteller" id="9Cr5a8AyZHs"></div>
    <div class="element-item solution" id="Iiifw0HG2OU"></div>
    <div class="element-item hearing-loss" id="GKNyK9sYrIc"></div>
</div>
<div id="modals"></div>

CSS

/* ---- isotope ---- */

/* clear fix */
 #grid:after {
    content:'';
    display: block;
    clear: both;
}
img {
    display: block;
    max-width: 100%;
    border:1px solid gray;
}
.grid-sizer, .element-item {
    width: 25%;
    float: left;
}
.element-item {
    padding:10px;
    box-sizing:border-box
}

JavaScript

// filter items on button click
$('.filter-button-group').on('click', 'button', function () {
    var filterValue = $(this).attr('data-filter');
    $('#grid').isotope({
        filter: filterValue
    });
});

// bind sort button click
$('.sort-by-button-group').on('click', 'button', function () {
    var sortValue = $(this).attr('data-sort-value');
    //var $grid = $('#grid').isotope();
    //$grid.isotope({ sortBy: sortValue });
    $('#grid').isotope({
        sortBy: sortValue,
        sortAscending: {
            title: true,
            popular: false,
            date: false
        }
    });
});

$(".element-item").click(function(e){
    e.preventDefault();
    var id = $(this).attr(id);
    REACTOR.popme('yt_'+id);
});

// change is-checked class on buttons
$('.button-group').each(function (i, buttonGroup) {
    var $buttonGroup = $(buttonGroup);
    $buttonGroup.on('click', 'button', function () {
        $buttonGroup.find('.active').removeClass('active');
        $(this).addClass('active');
    });
});

$(function () {
    var elems = $(".element-item"),
        count = elems.length;
    var strVideo = "";
    elems.each(function (index) {
        var $this = $(this);
        var videoID = $this.attr("id");
        strVideo = strVideo + videoID + ",";
        $("#modals").append("<div style='display: none;'><div id='yt_"+videoID+"' class='popme' tabindex='-1' style=' width: 660px;'><iframe width='640' height='360' src='http://www.youtube.com/embed/"+videoID+"?rel=0' frameborder='0' scrolling='Auto'></iframe></div></div>");          
    });

    $.get("https://www.googleapis.com/youtube/v3/videos?part=snippet%2Cstatistics&id=" + strVideo + "&fields=items(snippet%2Cstatistics)&key=AIzaSyAOjFEcmmWwbVhk7vo-IG-U8pCFDA0z_Yo", function (data) {

        for (i = 0; i < count; i++) {
            var date = data.items[i].snippet.publishedAt,
                viewed = data.items[i].statistics.viewCount,
                title = data.items[i].snippet.title,
    ...