Seit WordPress 3.0+ können Sie Youtube-Videos einfach in Ihre Artikel einbetten, indem Sie einfach die URL der Video-Site in Ihren Texteditor einfügen. WordPress wird dann den Rest bearbeiten und den erforderlichen Code einfügen, um das Video auf Ihrer Website einzubetten. Das ist alles toll, außer dass die Breite und Höhe des eingebetteten Videos vorangestellt ist und Sie es nicht ändern können. Möglicherweise ist das Video entweder zu klein für das Thema oder zu groß, um in den Inhaltsbereich zu passen. Wenn Sie ein Responsive Theme für Ihre Site verwenden, werden Sie feststellen, dass das Video nicht skaliert wird, wenn Sie die Größe des Browsers ändern und Ihr Theme schließlich durchbrochen wird.

Um das zu verdeutlichen, ist folgendes passiert:

Beachten Sie, dass das Video nicht die volle Breite des Inhaltscontainers einnimmt?

Beachten Sie, dass das Video nicht skaliert, wenn Sie die Größe des Browsers ändern und es aus dem Inhaltscontainer ging und das Thema unterbricht?

Um dies zu beheben, müssen wir ein Skript verwenden - FitVids - das Ihr eingebettetes Video in ein reaktionsfähiges Objekt mit voller Breite verwandelt und automatisch skaliert, wenn Sie die Größe des Browsers ändern.

Persönlich habe ich das FitVids-Skript direkt in das Theme integriert, um den Server-Overhead zu reduzieren, aber für diejenigen, die keine Erfahrung im Codieren haben, gibt es ein Plugin, das es für Sie tun kann: FitVids für WordPress.

1. Installieren und aktivieren Sie das FitVids for WordPress Plugin.

2. Gehen Sie zu "Aussehen -> FitVids".

3. Wenn Sie absolut sicher sind, dass das jQuery-Skript (Version 1.6 und höher) bereits in Ihrem Design enthalten ist, lassen Sie das Feld "jQuery hinzufügen" leer. Wenn nicht, aktivieren Sie das Kontrollkästchen neben "jQuery hinzufügen".

4. Das Feld "jQuery Selector" ist ein bisschen schwierig, weil es für jede Site unterschiedlich sein kann. In den meisten Fällen können Sie einfach das Wort " body " (ohne Zitat) in das Eingabefeld eingeben und es sollte funktionieren. Wenn Sie jedoch einen bestimmten Container mit Video als Ziel .entry-content möchten, können Sie die ID / Klasse des Containers in dieses Feld .entry-content, z. B. " #video-container ", " #content ", " .entry-content ". etc.

Hinweis : Die Zeichen "#" und "." Vor dem Text repräsentieren die "ID" und die "Klasse" in CSS.

5. Sehen Sie sich den Post mit einem eingebetteten Video an. Sie sollten so etwas sehen:

Das Video nimmt nun die volle Breite des Inhaltscontainers ein

Es skaliert automatisch, wenn Sie die Größe des Browsers ändern.

Fazit

FitVids ist ein einfach zu verwendendes Skript, um Ihr eingebettetes Video in ein reaktionsfähiges Objekt zu konvertieren. Probieren Sie es aus und lassen Sie uns wissen, ob dies für Sie nützlich ist.