Das fertige Skript

jQuery(document).ready( function() {
  jQuery("a.youtube").click(function() {
    var youtube_id = this.href.match(new RegExp("(youtube.com/watch\\?v=|youtu.be/)([a-zA-Z0-9_-]+)", "i"));
    if(youtube_id) {
      youtube_id = youtube_id[2]; //VIDEO-ID		
      jQuery.fancybox({
        'autoScale'	: false,
        'transitionIn'	: 'elastic',
        'transitionOut'	: 'elastic',
        'width'		: 640,
        'height'	: 385,
        'title'		: this.title,
        'href'		: "http://www.youtube.com/embed/" + youtube_id + "/",
        'type'		: 'iframe'
      });	
      return false;
    }
  });		
} );

Die Grundidee stammt dabei von der Fancybox-Seite selbst: Fancybox: Show youtube clips
Allerdings verwende ich den iFrame-Embed-Code, da dieser YouTube die Wahl zwischen Flash- und HTML5-Player überlässt und man dadurch auch auf Plattformen ohne Flash (z.B. iOS) noch die Chance hat, dass das Video abgespielt wird.

So wird’s genutzt

Das Skript erwatet Links auf YouTube-Videos und öffnet diese dann bei aktiviertem JavaScript in einer Lightbox. Wenn kein JavaScript aktiviert ist, dann funktioniert der Link wie gehabt und führt den Besucher auf die YouTube-Seite des Videos.

<a href="http://www.youtube.com/watch?v=5D__rKR44-8" class="youtube" title="Video in einer Lightbox">Video</a>

Dabei kann innerhalb des Links beliebiger Inhalte stehen. Man kann also z.B. auch Video-Thumbnails in dieser Form verlinken!
Das title-Attribut wird später unterhalb der Fancybox angezeigt werden.

So funktioniert’s

Beim Klick auf den Link mit der Klasse .youtube wird das obige JavaScript ausgeführt. Dieses ermittelt die Video-ID aus der URL und öffnet dann das Video in der Lightbox. Dazu nutzt es den YouTube-iFrame-Embed-Code.
Knackpunkt bei dieser Version ist noch der reguläre Ausdruck. YouTube nutzt einige unterschiedliche Link-Formate, die allesamt von dem regulären Ausdruck abgedeckt werden müssen. Bislang werden lediglich Links der Form "youtube.com/watch?v=VIDEOID" (Parameter “v” an erster Stelle) und "youtu.be/VIDEOID" unterstützt. Das lässt sich aber jederzeit um neue Linkformate erweitern.

Demo

Ein Klick auf das Bild öffnet ein Video in der Fancybox

Kurz & knapp: Responsive Webdesign

Eine kleine Demonstration von Responsive Webdesign bietet diese Webseite: Wenn man das Browserfenster verkleinert, dann passt sich die Webseite -bei Unterschreiten einer Grenzbreite- an, indem die Seitenleiste verschwindet und die Navigation ihre Position verändert:

Die Seitenleiste wird in der Mobile-Version ausgeblendet, die Navigation wechselt ihre Position

Das alles ist komplett ohne JavaScript realisiert – möglich wird das mit den CSS3 Media Queries.

@media screen and (max-width: 800px) {		
   /* Hier Anweisungen, die nur für Bildschirme mit max. 800px Breite gelten sollen */
}

Oder auch als separates Stylesheet:

<link rel="stylesheet" media="screen and (max-width: 800px)" href="http://…" />

Media Queries werden bereits von allen modernen Browsern unterstützt (Mehr zur Browserkompatibilität).

Da viele mobile Browser die Seite skalieren und die Media Queries dadurch nicht greifen, ist ein <meta name="viewport">-Tag notwendig (Mehr Informationen):

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Vor- & Nachteile

Ein klarer Vorteil ist die einfache Anwendung: Ohne eine eigenständige Mobilewebseite mit Browserweiche, o.Ä. betreiben zu müssen, hat man mit wenigen Handgriffen eine Webseite, die für die mobile Nutzung angepasst ist.

Die einfache Anwendung schränkt natürlich auch ein: Mit Media Queries ist es z.B. nicht möglich, für mobile Geräte optimierte Bilder auszuliefern. Sicher: Man kann die Bilder per CSS skalieren – aber die Daten werden dennoch (in voller Auflösung) übertragen.
Das selbe gilt für HTML-Elemente: Man kann sie zwar ausblenden, aber auch sie werden auf das Gerät übertragen.
Zwar ist mobiles Internet nicht mehr so langsam wie vor einigen Jahren, aber auf eine hohe Bandbreite kann (und sollte) man sich eben noch nicht verlassen.

Extra angepasste mobile Webseiten bieten einiges an Mehrwert gegenüber Webseiten, die lediglich per Media Query angepasst wurden: So kann man das HTML-Markup abspecken, runterskalierte Bilder ausliefern, und, und, und.

Media Queries sind natürlich nicht nur auf Mobilgeräte beschränkt. Man kann mit ihnen Webseiten auch für unterschiedliche (Desktop-)Monitorauflösungen anpassen und vieles mehr: Beispiele für Seiten, die Media Queries nutzen

Wie man rel="author" einsetzt:

Eins vorweg: Ohne Google Profil kommt man nicht weit! Google verlangt einen Link von der eigenen Webseite auf sein Profil – und quasi zur Bestätigung einen Link vom Profil zurück auf die Internetseite.

Es gibt unterschiedliche Möglichkeiten, wie man diese Links setzen kann. Ich nutze eine separate Autorenseite. Webseiten, die nur von einem Autoren betreut werden, können sich diese Seite oftmals sparen – dazu später mehr.

1. Deine Inhalte verweisen auf eine Autorenseite (z.B. mit einer Biographie, einer Übersicht deiner Artikel, …). Dieser Link wird mit einem Attribut rel="author" ausgezeichnet:

   <a href="/uber-mich/" rel="author" title="Über mich">Über mich</a>

2. Auf der Autorenseite platzierst du einen Link zu deinem Google+-Profil:

   <a href="http://plus.google.com/117741749300587886396/" rel="me" title="Google+">Google+</a>

3. Nun musst du nur noch die URL deiner Webseite in dein Google+-Profil eintragen.
4. Google bietet mit dem Rich Snippets Testing Tool eine Möglichkeit dein Markup zu testen.

Wer ohne die zusätzliche Autorenseite auskommen will, kann ganz einfach einen Google+-Profilbutton verwenden. Diesen einfach auf der eigene Seite einbinden und überprüfen. Fertig!

Vorteile für Webseitenbetreiber

Seitenbetreiber, die auf diese Weise auf ihr Google-Profil verlinken, haben die Chance, dass Google ihre Seiten in den Suchergebnissen prominenter anzeigt. Nein, das Ranking an sich wird dadurch (bislang?) noch nicht beeinflusst – aber die Art der Darstellung!

Seite mit rel="author" in den Google-Suchergebnissen (Montage)

Allerdings ist das reine Setzen dieser Profillinks kein Garant dafür, dass Google die Profilinformationen auch anzeigt. Sollte das Profilbild auch nach einiger Zeit noch fehlen, lohnt sich ein Blick in Googles FAQ, die einige mögliche Ursachen aufzählen.