Optymalizacja ładowania dużej ilości filmików z youtube'a w iframe na jednej stronie

[Aerografit]

Optymalizatorzy, mam mały problem i szukam wydaje mi się bardzo prostego rozwiązania, ale jako że jestem raczej amatorem to nie potrafię go znaleźć. Mam sporo filmików z Youtube'a umieszczonego na swojej podstronie w ramce (Iframe), co jest dla mnie super sprawą, bo odwiedzający widzi miniaturki, klika i od razu puszcza mu się odpowiedni filmik. Każdy filmik jest zamieszczony na stronce w postaci takiego kodu:

Spoiler

<div class="project-item-yt filterable-item film"><iframe width="400" height="218" src="https://www.youtube.com/embed/nr_filmiku_na_yt?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen alt="jakaś nazwa filmika"></iframe></div>    

Problem w tym, że trochę czasu mija zanim te wszystkie miniaturki filmików się załadują. W dodatku ładują się nie po kolei od góry na dół tylko losowo. Mam szybkie łącze więc nie jest źle, ale jak ktoś ma słabsze, albo przegląda w telefonie to musi nieźle psioczyć.

Czy istnieje takie rozwiązanie, żeby wpierw ładowały się i wyświetlały się np. same miniaturki w postaci zwykłych obrazków JPG umieszczonych na moim serwerze, a po kliknięciu na nie dopiero ładowało ten filmik/iframkę ?

Ewentualnie jakiś inny sprytny pomysł?

 

Jakby coś poniżej link do tej podstrony z filmikami:

https://www.aerografit.pl/aerograf-filmiki.html

[Mion]

Dnia 4.05.2017 o 14:41, Aerografit napisał:

Ewentualnie jakiś inny sprytny pomysł?

Na stronie ładowane screeny filmów jako grafika następnie AJAX lub JavaScript i dynamiczny kod HTML wstrzykiwany do DIV'a zawierający kod iframe.