Slider mit YouTube Integration – Daniels Technikblog

Was sollte getan werden:

Für unsere Webseite haben wir eine Kundenbefragung durchgeführt. Dabei haben wir unsere Kunden interviewt und deren Antworten in ein kleines feines Video verpackt. Diese Videos sollen natürlich auf der Webseite prominent präsentiert werden.

Technische Anforderungen:

Auf der Startseite sollte ein Slider integriert werden, welcher je nach Auflösung(responsiv) bis zu drei Kundenstimmen nebeneinander anzeigt. Mit klick / slide Navigation sollte jeweils weitergeblättert werden können zu den nächsten Kundenstimmen. Da nicht jede Kundenstimme über ein Video verfügt, sollte bei Datensätzen mit Video eine separate Kennzeichnung integriert werden.

Als PlayButton wurde eine gebrandete Grafik verwendet.

Bei Klick auf das Symbol öffnet sich ein PopUp – welches das YouTube Video enthält

Technische Integration:

Die Kundenstimmen wurden mit einer eigenen Extension für TYPO3 integriert. Jeder Datensatz kann mit folgenden Properties erstellt werden:

Anrede
Vorname
Nachname
Ort
Kommentar
Bild
YouTube Link

Daraus wird im Frontend dann die Kundenstimme erzeugt. Kundenstimmen werden zufällig aus dem Repository geholt

public function findRandom() {
  $rows = $this->createQuery()->execute()->count(); 
  $row_number = mt_rand(0, max(0, ($rows - 1))); 
  return $this->createQuery()->setOffset($row_number)->setLimit(1)->execute(); 
}

Als Slider wird der BxSlider verwendet in der Version v.4.2.12 von Steven Wanderski

Die Integration des YouTube PopUps wird über Fluid realisiert.

Wenn im Datensatz eine YouTube ID eingetragen ist, so wird der Button über das Bild gerendert :

<f:if condition="{voice.youtube} !=''">
  <img class="playbutton" onclick="changeVideo('{voice.youtube}')" src="..." alt="image" />
</f:if>

Und per jQuery dynamisch aufgerufen in einem Bootstrap Modal Dialog

$(document).ready(function(){
    $("#myModal").on("hidden.bs.modal",function(){
        $("#iframeYoutube").attr("src","#");
    })
})

function changeVideo(vId){
    var iframe=document.getElementById("iframeYoutube");
    iframe.src="https://www.youtube.com/embed/"+vId;

    $("#myModal").modal("show");
}

Zu Guter Letzt bleib noch zu sagen, dass die Anzahl der zu zeigenden Kundenstimmen per JavaScript je noch Aulösung gesteuert wird:

if ($(window).width() <= 640) {
    $slideCount = 3;
};
if ($(window).width() <= 500) {
    $slideCount = 1;
};

Schreibe einen Kommentar Antworten abbrechen