проблема при попытке отобразить результаты поиска YouTube с разной высотой

Я занят базовым приложением для YouTube-плеера, использующим angular4.x. Я использую компонент мгновенного поиска с использованием rxjs, который делает запрос, когда поле ввода изменяется после 400 мс без изменения ...

Сначала я попытался отобразить результаты поиска в div col-md-4, чтобы в каждой строке было по три результата. Затем у меня возникла проблема, когда некоторые эскизы или текст некоторых результатов поиска имели разную высоту, а затем переносились на следующую строку ...

Затем я применил стиль flexbox к результатам поиска, и это кажется лучше, однако некоторые эскизы всегда отсутствуют, и теперь у меня есть только два результата поиска на строку, где определенно есть место для 3-4.

Любая идея, как я могу заставить это работать / почему некоторые эскизы видео не отображаются (даже если они были возвращены API YouTube)?

мой шаблон результатов поиска:

<div class="eqrow">
    <div class="col-md-4">
        <div class="thumbnail">
            <img src="{{result.thumbnailUrl}}">
            <button class="btn btn-default" (click)="play(result.id, result.title)">
                <span class="glyphicon glyphicon-play"></span><span class="sr-only">
                    Play</span>
            </button>    
            <div class="caption">
                <h6>{{result.title}}</h6>
            </div>
        </div>
    </div>
</div>

мой стиль eqrow:

.eqrow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.eqrow > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

мой поисковый компонент:

import {  Component, OnInit, Output, EventEmitter, ElementRef } from '@angular/core';    
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/distinctUntilChanged';

import { RestService } from '../../services/rest.service';
import { SearchResult } from '../../models/search-result.model';

@Component({
  selector: 'app-search-box',
  template: `
    <input type="text" class="form-control" placeholder="Search" [formControl]="term">
  `
})
export class SearchBoxComponent implements OnInit {
  term = new FormControl(); 
  @Output() loading: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output() results: EventEmitter<SearchResult[]> = new EventEmitter<SearchResult[]>();

  constructor(private restService: RestService) { }

  ngOnInit(): void {
        this.term.valueChanges.debounceTime(400)
        .distinctUntilChanged()
        .do(() => this.loading.emit(true))         // enable loading
        .switchMap(term => this.restService.search(term))
        .subscribe(
        (results: SearchResult[]) => {
            this.loading.emit(false);
            this.results.emit(results);
        },
        (err) => { 
          console.log(err);
          this.loading.emit(false);
        },
        () => { 
          this.loading.emit(false);
        });
  }
}