Responsive Videos mit FitVids

Fitvids - Responsive Videos

Wer sich mit Responsive Design beschäftigt, kommt zwangsweise irgendwann an den Punkt, Videos auch responsive zu gestalten.

Eingebettete Videos von Youtube oder Vimeo sind nicht von Haus auf Responsive und können daher ein solches Design zerstören. Wie man eingebettete Videos responsive macht, zeige ich hier.

FitVids – JQuery Plugin für fluide Video-Einbettungen

Gott sei dank haben sich andere Entwickler schon dieser Problematik angenommen und ein JQuery „Plugin“ erstellt, mit dessen Hilfe es ein Kinderspiel ist, Videos responsive darzustellen. Auf www.fitvidsjs.com, respektive GitHub findet man die letzte Version dieses Plugins.

Folgende Videoanbieter werden derzeit supported: Youtube, Vimeo, Blip.tv, Viddler und Kickstarter

Videos responsive einbetten

Wie baue ich FitVids ein?

Nachdem das .js heruntergeladen und an eine beliebige Stelle der Webseite kopiert wurde (beispielsweise im /js Folder), müssen im Header der Webseite folgende Elemente geladen werden:

JQuery 1.7+ laden

<script src="pfad/zu/jquery.min.js"></script>
oder
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

FitVids .js laden

<script src="pfad/zu/jquery.fitvids.js"></script>

Folgendes Script vor den schließenden </head>-Tag setzen.
Diese Funktion setzt um das Video eine Klasse div.fluid-width-video-wrapper, der dann die nötigen CSS-Angaben hinzugefügt werden.

<script>
$(document).ready(function(){
// .video ist beispielsweise ein Name des Containers, welcher um das Video stehen muss
// Auf .video wird dann FitVids angewendet
$(".video").fitVids();
});</script>

Responsive Videos in WordPress mit Hilfe von FitVids einbauen

In WordPress ist es schöner, wenn man FitVids mit Hausmitteln einbaut. Am besten geht man hier folgend vor:

  1. Herunterladen der letzten FitVids Version und speichern der .js Datei in den /js Folder des Themes
  2. Die JavaScript Library mit einer Funktion in der functions.php laden (Pfade müssen evtl. geändert werden)
// FitVids für responsive Videos laden
function loadfitvids() {
if (!is_admin()) {

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

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

}
}
add_action('init', 'loadfitvids');

3. Um nicht jedem Video die Klasse .video manuell hinzufügen zu müssen, kann man diese auch automatisch oembed Inhalten (wie embedded Videos) hinzufügen.

Achtung: Gegebenenfalls kann es nötig sein, bestehende Posts und Seiten neu speichern zu müssen, damit die Klasse den eingebetteten Videos automatisch hinzugefügt wird.

Ein weiterer Eintrag in der functions.php

// .video Klasse automatisch oembed content hinzufügen
function anaximander_embed_filter( $html, $data, $url ) {

$return = '<div class="video">'.$html.'</div>';
return $return;
}
add_filter('oembed_dataparse', 'anaximander_embed_filter', 90, 3 );

Fazit: Die Jungs (und Mädels) von fitvidsjs.com haben ganze Arbeit geleistet. Mit Hilfe des JQuery Plugins ist es ein leichtes Responsive Funktionalität auch für Videos bereit zu stellen. Der Einbau in WordPress gestaltet sich ebenso problemlos.

Letzte Version vom 27. Februar 2018 von Netzgänger
Jetzt WordPress Newsletter in dein Postfach

Melde dich jetzt für meinen Newsletter an und du erhältst regelmäßig Tipps und Tricks zu WordPress in dein Postfach. Natürlich kannst du ihn jederzeit abbestellen.


Kommentar schreiben

Mit Absenden deines Kommentars erklärst du dich mit der Verarbeitung deiner hier angegebenen Daten einverstanden (Datenschutzerklärung). Diese werden nur zur Verwaltung der Kommentare verwendet und keinem anderen Zweck zugefügt. Du kannst jederzeit per E-Mail an info@netz-gaenger.de der Speicherung deiner Daten widersprechen.

* Notwendige Angaben

Netzgänger Webdesign | Rohrersmühlstraße 22 in Schwabach | Bayern
Kontakt: info@netz-gaenger.de
↑ oben
Inhalt