Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 5 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet. Mixtapes die nicht mehr online sind laden wir gerne nochmal neu hoch. Kommentar genügt. 😉

Wie bereits erwähnt, habe ich vor kurzem auf ein neues Theme umgestellt. So ziemlich alles daran ist responsive – sieht also sowohl auf Desktop-PCs und Laptops, als auch auf Smartphones und Tablets ordentlich aus. Einzig die eingebundenen Videos (YouTube, Vimeo, etc.) und Soundcloud-Player haben mir ein bisschen Kopfschmerzen bereitet. Denn diese lassen sich normalerweise nur mit fester Breite einbinden, und nicht relativ skalieren.

Ich habe nach einem Weg gesucht, genau das zu erreichen – und auch einen gefunden. In der Vermutung, dass das auch andere Bloggerkollegen interessieren könnte, gibt es dazu an dieser Stelle ein kleines Tutorial.

Das Jupiter Theme hat – wie viele andere Themes auch – eine schöne “Featured Video” Funktion, mit der man in jeden Beitrag ein Video responsive einbinden kann (zu sehen z.B. hier). Allerdings sind diese Featured Videos nicht Bestandteil des eigentlichen Artikels. Sie werden zwar im Blog vor dem Artikel angezeigt, tauchen aber beispielsweise im RSS-Feed nicht auf. Außerdem sind sie immer an das verwendete Theme gebunden, und würden höchstwahrscheinlich einfach verschwinden, sobald man das Theme wechselt.

Wenn man nun mehrere Videos einbinden will, das bzw. die Videos mitten im Text einbinden möchte, sie auch im RSS-Feed auftauchen sollen, und man sich die Option eines Themewechsels nicht verbauen möchte, kommt man um das normale einfügen der YouTube- / Soundcloud-Player nicht herum.

oEmbed und die fixe Breite

Nun hat WordPress seit der Version 2.9 diese schöne oEmbed-Funktion. Sie erlaubt es, Medien von diversen Seiten einzubinden, indem man einfach die URL zum (YouTube-)Video oder dem Soundcloud Track einfügt. WordPress kümmert sich dann um den Rest, und macht daraus einen fertigen Player.

Diese allerdings werden immer mit einer festen Breite angezeigt. WordPress-Standard sind 500px. Diese Breite kann man in der functions.php seines Themes anpassen (sofern der Theme-Author das nicht schon getan hat), indem man folgende Zeilen einfügt:

global $content_width;
$content_width = 500;

Und den Wert $content_width entsprechend anpasst.

Das löst aber unser Problem nicht. Denn wir möchten hier keine feste Breite in Pixeln angeben, sondern einen Wert von 100% – damit das Video auf allen Endgeräten und Auflösungen, sowie beim verändern der Größe des Browserfensters die volle Breite des Beitrags einnimmt.

Viele Wege führen nach Rom

Da schon andere Leute mit diesem Problem zu kämpfen hatten, gibt es dafür bereits diverse Lösungsansätze. Wer zum Beispiel das WordPress Plugin Repository durchsucht, findet dort eine ganze handvoll Plugins, die Videos & Co. responsive einbinden. Abgesehen davon, dass ich auf Plugins nach Möglichkeit verzichten möchte, weil jedes Plugin WordPress ein bisschen langsamer macht, gibt es noch ein zweites Problem. Denn die meisten (wenn nicht alle) dieser WordPress-Plugins funktionieren mit Shortcodes. Sprich: Um Videos & Co. responsive in den Artikel einzufügen, muss man statt des Links zum Video- oder Audiofile einen Shortcode a la [youtube http://www.youtube.com/watch?v=vqLIpq2VC48] einfügen. Ich bin bei sowas vorsichtig geworden, da man nie weiss, ob das entsprechende Plugin auch in ein oder zwei Jahren noch funktioniert. Und wenn nicht, hat man u.U. hunderte oder tausende Artikel, die man händisch bearbeiten muss, damit die Videos wieder funktionieren. Been there, done that. Sucks big time – wollen wir nicht.

Wir möchten eine Lösung, mit der wir auch weiterhin nur die Links in den Artikel einfügen müssen, und WordPress den Rest machen lassen können. Die hauseigenen Mittel nutzen, und nur ein bisschen erweitern.

Nutzen was schon da ist: jQuery

Zu diesen hauseigenen Mitteln gehört auch jQuery. Das wird sowieso geladen, insofern bietet es sich an, für unsere Zwecke ein kleines jQuery Plugin zu nutzen. Und hier kommt FitVids.JS in’s Spiel. Dieses skaliert nämlich die Videos (genauer gesagt die iframes) in bestimmten Containern auf 100%. Nachteil: damit das funktioniert, müssen wir die entsprechenden iframes in einen extra Container packen. Der Code dafür sähe ungefähr so aus:

<div class="video"><div class="fluid-width-video-wrapper" style="padding-top: 56.2%;"><iframe src="xyz" frameborder="0"></iframe></div></div>

Wir wollen aber auch nicht für jedes Video wieder im Text-Editor rumfummeln, und manuell irgendwelche DIVs einfügen. WordPress soll das automatisch machen. Und hier kommt die functions.php in’s Spiel. Also, Schritt für Schritt:

1. FitVids laden und einbinden

Zuerst mal müssen wir FitVids.js runterladen, und die jquery.fitvids.js Datei in unseren Theme-Ordner packen. Der Übersicht halber am besten in den Unterordner /js (also z.B. /wp-content/themes/deintheme/js). Dann öffnen wir die functions.php unseres Themes, und fügen die folgenden Zeilen ein:

// Add FitVids to allow for responsive sizing of videos
function your_theme_fitvids() {
	if (!is_admin()) {

		wp_register_script( 'fitvids', get_stylesheet_directory_uri() . '/js/jquery.fitvids.js', array('jquery'), '1.0', true);    	
    	wp_enqueue_script( 'fitvids');
    	add_action('wp_footer', 'add_fitthem');

    	function add_fitthem() { ?>
	    	<script type="text/javascript">
		    	jQuery(document).ready(function() {
	    			jQuery('.video').fitVids();
	    		});
    		</script><?php
	    }
	}
}

add_action('init', 'your_theme_fitvids');
?>
<?php
// Automatically add FitVids to oembed YouTube videos
function your_theme_embed_filter( $output, $data, $url ) {

	$return = '<div class="video">'.$output.'</div>';
	return $return;

}
add_filter('oembed_dataparse', 'your_theme_embed_filter', 90, 3 );

 2. Code für Soundcloud

Damit auch die Soundcloud-Player eine Breite von 100% haben, fügen wir noch folgenden Code in die functions.php ein:

add_filter('oembed_fetch_url', 'soundcloud_no_width', 10, 3);
function soundcloud_no_width($provider, $url, $args) {
	if ( 'soundcloud.com' == parse_url( $url, PHP_URL_HOST ) ) {
		$provider = remove_query_arg( 'maxwidth', $provider );
	}
	return $provider;
}

Dieser sorgt dafür, dass unser von WordPress generierter Soundcloud-Player keinen Wert für die maximale Breite an Soundcloud übermittelt. Soundcloud verwendet dann standardmäßig 100%.

3. Maximale Mediengröße auf 0 setzen

Damit WordPress uns jetzt nicht dazwischen funkt, müssen wir in der Mediathek noch die maximale Bildgröße auf Null setzen. Sollte hier ein anderer Wert angegeben sein, nutzt WordPress diesen Wert als fixe Breite, und unser Lösungsansatz funktioniert nicht.

Dazu gehen wir im WordPress Backend auf Einstellungen > Medien, und setzen in der Zeile “Maximale Bildgröße” die Breite und die Höhe auf 0. Speichern nicht vergessen.

Mediathek

4. Alte Einträge aktualisieren

Wie fast alle Lösungsansätze hat auch dieser einen Nachteil. Denn: die ganzen Funktionen, die wir gerade in die functions.php eingefügt haben, werden nur ausgeführt, wenn ein Beitrag gespeichert oder aktualisiert wird. Das heisst, dass ihr alle Einträge, die in eurem Blog bereits existieren, noch einmal öffnen und aktualisieren müsst.

Bei einem Blog, das schon 2.000 oder mehr Artikel hat, kann das einiges an Zeit in Anspruch nehmen. Man kann das ganze etwas verkürzen, indem man die WordPress eigene QuickEdit-Funktion benutzt, und damit gleich mehrere Artikel auf einmal öffnet, und neu speichert. Womöglich gibt es auch Plugins, die das komplette Archiv abfrühstücken, und jeden Artikel aktualisieren. Mir ist keins bekannt, und ich muss sowieso das halbe Archiv mal auf Fehler untersuchen und aktualisieren, deswegen habe ich auch nicht danach gesucht. Aber vielleicht findet ja jemand von euch eine Lösung, und möchte sie in den Kommentaren mit uns teilen.

Fazit

Abgesehen von der Arbeit, die mit dem manuellen aktualisieren aller bisherigen Blogposts einhergeht, klingt diese Lösung für mich zwar nicht nach der einfachsten, aber nach der performantesten, und zukunftssichersten Option. Zumindest so lange, bis auch WordPress den zunehmenden Trend zu Responsive Themes, und der Notwendigkeit einer hauseigenen Lösung für Responsive Embeds erkennt, und diese gleich in WordPress integriert.

Disclaimer: der hier verwendete Code stammt von Morten Rand-Hendriksen. Ich habe seinen Artikel lediglich ins deutsche übersetzt, und ein bisschen erweitert.

Anbei noch eine kleine Demonstration, wie das Ganze dann aussieht. Zum testen einfach mal am Browserfenster spielen.

https://soundcloud.com/angelhazeym/angel-haze-cleaning-out-my

Total
0
Shares

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.