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="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.min.js"></script>
<div class="result"></div>

<span>Filter:</span>
<div class="button-group filter-button-group">
    <button data-filter="*">All</button>
    <button data-filter=".hearing-loss">Hearing Loss</button>
    <button data-filter=".storyteller">Storyteller</button>
    <button data-filter=".solution">Solution</button>
</div>

<span>Sort:</span>
<div class="button-group sort-by-button-group">
    <button class="button" data-sort-value="title">Title</button>
    <button class="button" data-sort-value="date">Newest</button>
    <button class="button" data-sort-value="popular">Popular</button>
</div>

<div class="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>

CSS

img {
    max-width:100%;
    width:auto;
    border:1px solid gray;
}

.grid-sizer,
.element-item { width: 50%; }
.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');
   $('.grid').isotope({ sortBy: sortValue });
  });

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

$(function(){
    $(".element-item").each(function(i){
        var $this = $(this)
        var videoID = $this.attr("id");
        $.get( "https://www.googleapis.com/youtube/v3/videos?part=snippet%2Cstatistics&id="+videoID+"&fields=items(snippet%2Cstatistics)&key=AIzaSyAOjFEcmmWwbVhk7vo-IG-U8pCFDA0z_Yo", function( data ) {
            var date=data.items[0].snippet.publishedAt,
            viewed=data.items[0].statistics.viewCount,
            title=data.items[0].snippet.title,
            thumb=data.items[0].snippet.thumbnails.medium.url;

            $this.attr({
                "data-date": date,
                "data-popular": viewed
            });
            $this.html("<a href='#' target='_blank'><img src='"+thumb+"' alt='"+title+"' /></a><p class='title'>"+title+"</p>");
            
        }); 
    });
 makeGrid();
});

function makeGrid(){
     var $grid = $('.grid').isotope({
      // set itemSelector so .grid-sizer is not used in layout
      itemSelector: '.element-item',
      layoutMode: 'fitRows',
      percentPosition: true,
      masonry: {
        // use element for option
        columnWidth: '.grid-sizer'
      },getSortData: {
          title: '.title',
          date: '[data-date] parseInt',
          popular: '[data-popular]...