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:)