info@netz-gaenger.de       📞 +49 151 / 28859057
Fitvids - Responsive Videos

Responsive Videos mit FitVids

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.

Hat dir mein Beitrag geholfen?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Letzte Version vom 27. Februar 2018 von Netzgänger

Beliebte Artikel

Wie gut ist HostPress, der spezialisierte WP Hoster?

Als WordPress-Entwickler habe ich viel mit Hostern zu tun. Hier liest du meine Erfahrungen zu HostPress und warum ich jetzt selber in einigen Projekten auf den Hosting-Anbieter setze.

Die besten Webhoster im Vergleich

Als WordPress Entwickler kenne ich alle guten Hoster. Hier zeige ich dir die besten WP Hoster und welcher für dich Sinn macht.

Muss WordPress gewartet werden?

Müssen WordPress Sites gewartet werden? Braucht es die regelmäßigen Updates oder kann man sich den Aufwand sparen? Das erkläre ich hier.

Die besten WP Security Plugins

WordPress solltest du immer absichern. Dafür gibt es diverse Plugins, die dich bei den Securitymaßnahmen unterstützen. Meine Empfehlungen.

Die besten Plugins für Auto-Übersetzung

Hier zeige ich dir 4 Plugins, die es ermöglichen WordPress automatisch zu übersetzen. Von wirklich gut bis wirklich schlecht ist alles dabei.

Die besten Plugins für Mehrsprachigkeit

Mit diesen 5 Plugins kannst du WordPress ganz einfach selber mehrsprachig einrichten. Multi-Language Fähigkeit in WP nachrüsten.

Bildnachweise: Freepik - Flaticon

Kommentare

Schreibe einen Kommentar

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