Weblog

Eine eigene YouTube-Playlist erstellen

Eigentlich sollte man ja meinen die Usability bei YouTube sei zumindest ausreichend, damit sich Otto-Normal-User damit zurecht findet. In vielen Fällen stimmt das ja auch, wer allerdings auf seiner Webseite schon mal eine Playlist eingebunden hat, wird da vielleicht anders denken. Denn nicht wenige User dürfte die ausklappbare Playlist links oben schlicht entgehen.

Dem kann man an sich nicht wirklich Abhilfe leisten, allerdings kann man mit Hilfe von ein wenig JavaScript relativ simpel eine eigene Playlist wie jene in diesem Screenshot zusammenbauen:

youtubplaylist

Dabei ist das obere Video das Standard-iFrame von YouTube, während die unteren Vorschaubilder die eigene Playlist abbilden. Natürlich ist das Ganze so miteinander verknüpft, dass ein Klick auf eines der Vorschaubilder im eingebundenen iFrame das entsprechende Video abspielt.

Der Code für iFrame und erstes Vorschaubild sieht folgendermaßen aus:

<iframe id="vid_frame" width="1100" height="620" src="https://www.youtube-nocookie.com/embed/mL5YtfBgK1M?list=PLOLx2a4eonZUD7ePvVvh_Ex5I4AX22qsa" frameborder="0" allowfullscreen></iframe>

<p><strong>Playlist:</strong></p>
<div class="vid-list">
<div class="vid-item" onClick="document.getElementById('vid_frame').src='http://youtube.com/embed/mL5YtfBgK1M?autoplay=1&rel=0&showinfo=0&autohide=1'">
<div class="vid-item">
  <div class="thumb">
   <img src="http://img.youtube.com/vi/mL5YtfBgK1M/0.jpg">
  </div>
  <div class="desc">
      Mercedes GLE Coupe Tuning mit Maserati Ghibli V8 Sound
  </div>
</div>
</div>

Zuerst kommt das von YouTube kopierte iFrame, das allerdings mit id=“vid_frame“ ergänzt wird. Das ist notwendig, damit die JavaScript-Funktion weiß, wo es das in der Playlist angeklickte Video abspielen soll.

Eingebunden wird das ganze mittels des EventHandlers onClick, hier begegnet uns das vid_frame innerhalb der JavaScript-Funktion ja wieder. Als Quelle, src für Source, wird dann das YouTube-Video angegeben, das abgespielt werden soll – hier inklusive der Anweisung automatisch gestartet zu werden und die Info auszublenden. Im Prinzip reicht es in ‚http://youtube.com/embed/mL5YtfBgK1M?autoplay=1&rel=0&showinfo=0&autohide=1‘ die Video ID mL5YtfBgK1M durch die des gewünschten Videos zu ersetzen.

Theoretisch könnte man dann auch einen einfachen Textlink setzen, mit einem Vorschaubild sieht das ganze aber doch viel besser aus. Gut, dass man eine ganze Reihe von Vorschaubildern eines YouTube-Videos auch direkt ansteuern kann. nämlich mit der URL http://img.youtube.com/vi/mL5YtfBgK1M/0.jpg. Auch hier muss man einfach nur die gewünschte Video-ID austauschen. Gefällt einem das 1. Thumbnail nicht, kann man mit 1.jpg das zweite ansehen usw. usf.

Das komplette Beispiel zum herunterladen gibt es hier, im Einsatz befindet es sich unter www.powersoundmodul.de.

Weblog

CSS: Button im anklickbaren 3D

Was wäre das Internet ohne Buttons? Mit Hilfe von ein wenig CSS lässt sich relativ einfach ein Button erstellen, der nicht nur nach 3D aussieht, sondern beim Klick mit der Maus auch einen realitätsnahen Effekt ausführt.

drueckmich
Button in 3D-Form

Um den 3D-Effekt zu erzeugen und beim Klick auf den Button eine Animation, ist folgendes CSS notwendig. Was hier übrigens fehlt ist eine Pseudoklasse :hover für den Button, die angezeigt wird wenn der User mit der Maus darüber fährt. Das ist aber reines Copy&Paste mit ein paar kleinen Anpassungen.

body {
 font-family:Verdana, Geneva, Tahoma, sans-serif;
 font-size: 24px;
 /* Perspektive für den 3D-Effekt des Buttons */
 -webkit-perspective: 400;
}
.button {
 /* Definition eines normalen Buttons in Form 
 eines Kastens mit Text als Inhalt */
 display: inline-block;
 text-decoration: none;
 color: #fff;
 font-weight: bold;
 padding: 20px 50px;
 border: 1px solid #DE9517;
 margin:100px;
 
 /* Ecken werden abgerundet */
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 
 /* Gradienten (erstellt z.B. mit http://css3generator.de/gradients/ */
 background: linear-gradient(top, #FC6513 0%, #F7C413 49%, #F7C413 100%); 
 background: -moz-linear-gradient(top, #FC6513 0%, #F7C413 49%, #F7C413 100%);
 background: -webkit-linear-gradient(top, #FC6513 0%, #F7C413 49%, #F7C413 100%);
 background: -ms-linear-gradient(top, #FC6513 0%, #F7C413 49%, #F7C413 100%);
 background: -o-linear-gradient(top, #FC6513 0%, #F7C413 49%, #F7C413 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FC6513, endColorstr=#F7C413,GradientType=1);
 
 /* Schatten für den Button */
 -webkit-box-shadow: 0px 10px 0px #F2CA3F, 0px 12px 20px rgba(0,0,0,.4);
 -moz-box-shadow: 0px 10px 0px #F2CA3F, 0px 12px 20px rgba(0,0,0,.4);
 box-shadow: 0px 10px 0px #F2CA3F, 0px 12px 20px rgba(0,0,0,.4);
 
 /* 3d Effekt hinzufügen */
 -webkit-transform: rotateX(5deg);
}
.button:active {
 background: linear-gradient(top, #FC6513 0%, #F7C413 25%, #F7C413 100%);
 background: -moz-linear-gradient(top, #FC6513 0%, #F7C413 25%, #F7C413 100%);
 background: -webkit-linear-gradient(top, #FC6513 0%, #F7C413 25%, #F7C413 100%);
 background: -ms-linear-gradient(top, #FC6513 0%, #F7C413 25%, #F7C413 100%);
 background: -o-linear-gradient(top, #FC6513 0%, #F7C413 25%, #F7C413 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FC6513, endColorstr=#F7C413,GradientType=1);
/* Animationseffekt beim Anklicken (setzt die Werte für 'transform' zurück */
 -webkit-transform: translate(0);
 -moz-transform: translate(0);
 transform: translate(0);
}

Den Farbverlauf des Buttons habe ich, wie im Kommentar angedeutet, nicht selbst erstellt. Dafür gibt es im Web reichlich Generatoren, bei denen man nur Anfangs- und Endwert eingeben muss, manchmal auch einen Übergangswert wie zum Beispiel bei jenem des CSS3Generators.

Live ansehen kann man sich den Effekt 3D Button in Aktion.