Google zmienia narzędzie do testowania stron na urządzeniach mobilnych.

Stary i dobry google pagespeed insights zdaje się odchodzić. Przynajmniej jeśli chodzi o test strony pod kątem obsługi na urządzeniach mobilnych. Co ciekawe wynik na starym GPI a nowym narzędziu wygląda całkowicie inaczej. Najwyraźniej zrezygnowano z wymiernej punktacji od 0-100. W tej chwili po prostu dostajemy komunikat, że jest OK. Wynik można udostępnić. Oto przykład: https://search.google.com/search-console/mobile-friendly?id=Mc3ZcCZ5x0YuYuv6jiTVXQ

Jak osadzić kilka filmów z Youtube na stronie w formie responsywnego slidera.

Zacznijmy od tego, że potrzeba jest nam biblioteka JQuery (do ściągnięcia na stronie projektu)

Plugin do osadzenia klipów dostępna jest Responsive YouTube Video Gallery Na stronie dostępne też jest DEMO.

W pierwszym kroku dołączamy skrypt js oraz css.

<script src="jq.video.slider.js"></script>
<link rel="stylesheet" type="text/css" href="jq.video.slider.css" media="screen" />

W kodzie HTML osadzamy nasze klipy z YT, przykładowo:

<div id="myVideoSlide">
<div class="videoitem">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/w9xsfICaS8U" width="560"></iframe>
<div class="desc_vs">Webdesign jeszcze z użyciem Flash</div>
</div>
<div class="videoitem">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/JjtRj5ybloY" width="560"></iframe>
<div class="desc_vs">Automatyczne generowanie przelew&oacute;w bankowych</div>
</div>
<div class="videoitem">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/ArqHzIjfwr0" width="560"></iframe>
<div class="desc_vs">Program do masowego wypełniania PIT-3(4) Podatek od czynności cywilnoprawnych</div>
</div>
</div>

Inicjujemy w kodzie js

<script type="text/javascript">
$(function () {
$('#myVideoSlide').videoOslide();
});
</script>

I gotowe:)