So fügen Sie ein Video als Vollbildhintergrund in WordPress hinzu
Veröffentlicht: 2019-02-01Videos sind großartig, sie bieten ein ansprechenderes Medium und fangen mehr Emotionen ein als Bilder.
Heutzutage gehen immer mehr Webmaster/Marken dazu über, Videos als vollständigen Hintergrund in ihre Website einzubetten. Die Komplexität der Einbettung des Videos in den Hintergrund erfordert jedoch einiges an technischem Fachwissen.
Um alles einfach und großartig für unsere Leser zu machen, werden wir ein kostenloses Plugin zum Einbetten von Videos in den Hintergrund auflisten und auch ein detailliertes Tutorial zum Einbetten von Videos in den Hintergrund mit einfachen Konfigurationen durchgehen.
Hinweis: Es ist etwas Programmiererfahrung erforderlich, um den Inhalt vollständig zu verstehen. Fühlen Sie sich frei, Fragen in den Kommentaren zu stellen, wenn etwas verwirrend aussieht.
Plugin zum Hinzufügen von Videos als Vollbildhintergrund in WordPress
Plugins sind großartig, sie bieten die erforderliche Funktionalität mit wenigen Klicks. Ich werde einige Plugins auflisten, bevor ich mit dem ausführlichen Tutorial fortfahre, wie man Videos mithilfe von Codierung in den Hintergrund einbettet.
1. mb .YTPlayer für Hintergrundvideos
Eines der beliebtesten Video-Plugins für die Hintergrundintegration. Das Plugin integriert einen benutzerdefinierten Player in das Element der Seite.
Mit dem Plugin können Nutzer die Videos einfach in Seiten integrieren und posten. Die Installation ist einfach und das Plugin generiert einen Shortcode zur einfachen Integration.
Das Plugin unterstützt responsives Layout nicht vollständig.
Vollständige Details und Download | Demo
2. Slider-Held mit Animationseffekten
Das Motiv des Plugins besteht darin, Ihnen das Einbetten von Videohintergrund in WordPress mit Schiebereglereffekten zu ermöglichen. Das Plugin bietet 11 Hintergrundanimationen, die Möglichkeit, Hintergrundmusik hinzuzufügen, YouTube- und Vimeo-Videointegration usw.
Das Plugin ist mit jedem WordPress-Theme oder -Editor wie Gutenberg kompatibel, sodass es auf allen WordPress-Websites reaktionsschnell und schnell ist.
Vollständige Details und Download | Demo
Jetzt kommt der eigentliche Teil. Der nächste Teil erfordert Codierung und technische Funktionsweise der WordPress-Plattform.
Das Einbetten von Videos erfordert viele Schritte. Gehen wir die Schritte nacheinander durch. Sobald Sie diese Schritte verstanden haben, können Sie verstehen, wie kompliziert eine einfache Sache werden kann.
1. Verwenden von Div, um Platz für das Video zu schaffen.
2. Holen Sie sich die Div-Positionierung oben links im Ansichtsfenster entweder absolut oder fest. Der nächste Schritt besteht darin, die Höhe und Breite auf 100 % festzulegen und dann den Z-Index auf 1 zu setzen. Der Z-Index definiert die Tiefe des Inhalts.
3. Skalierung von Div-Videos mit JavaScript.
4. Der Monitorbildschirm ändert die Größe und skaliert das Video jedes Mal erneut, wenn der Benutzer das Video skaliert.
5. Stellen Sie sicher, dass der Code auf verschiedenen Browsern und mobilen Betriebssystemen funktioniert.
Sieht nach viel Codierung aus, aber wir werden ein einfaches benutzerdefiniertes Plugin verwenden, um den Prozess des Einbettens von Videos in den Hintergrund des WordPress-Beitrags oder der Seiten zu automatisieren.
BGVIDEO: Herunterladen
Laden Sie das Plugin herunter und fahren Sie mit einer normalen Installation fort (genau wie bei der Installation anderer Plugins).
Dieses einfache Plugin arbeitet zusammen mit Shortcode und ein Shortcode namens „bgvideo“ ist im Plugin verfügbar. Der Shortcode fungiert als Gateway zum Einbetten von Videos in beliebige Seiten oder Beiträge.
Bevor wir fortfahren, müssen wir dem Shortcode einige Parameter zuführen, damit er vollständig funktioniert.
Die Parameter sind Höhe, Breite, mp4, webm, ogg, Autoplay, Schleife, stumm und fest. Höhe und Breite beziehen sich auf die Höhe bzw. Breite des Videos. Die Felder mp4, webm, ogg beziehen sich auf die URL des jeweiligen Videoformats. Es ist notwendig, dass Sie die URL jedes Formats angeben, damit das Video problemlos auf mehreren Geräten läuft.
Hinzufügen von Videos zur Medienbibliothek
Der nächste Schritt umfasst das Hinzufügen von Videos zur Medienbibliothek. Stellen Sie sicher, dass Sie alle Formate (webm, ogg, mp4) zur Medienbibliothek hinzufügen.
Mit Hilfe des bgvideo werden die Video-Shortcodes in das bgvideo umgewandelt.
Der Video-Shortcode sieht wie folgt aus
[%video width=”1280″ height=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4″][/video] [%video width=”1280″ height=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”][/video]<a%href=”http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg”><img%class=”alignnone size-large wp-image-1392″ src ="http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg" alt="video-background-test" width="1024" height="576" />
Vergessen Sie nicht, das Prozentzeichen (%) vor dem Video-Shortcode und dem Anchor-Tag zu entfernen.
Mit Hilfe des bgvideos wird der obige Code in den folgenden Code umgewandelt
[bgvideo width="1280" height="720" mp4="http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" webm="http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" poster="http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" fixed="nein"]
Das Plugin ändert den Video-Shortcode automatisch in den bgvideo-Shortcode.
Das Video für den Benutzer transparent machen
Bei allen Einstellungen müssen Sie in der Seiten-CSS-Eigenschaft ein wenig zaubern. Der Grund ist die Tatsache, dass der Inhalt der Seite die Anzeige des Videos behindert.
Das CSS entfernt den Inhalt der Seite und lässt das Video für Ihre Besucher erstrahlen.
Fügen Sie den folgenden CSS-Code ein, damit alles gut funktioniert.
#Seite{
Hintergrund: keiner;
}
Es gibt viele andere Optimierungen, die erforderlich sind, um den Videohintergrund vollständig einzurichten.
Einpacken
Die beste Wahl für unsere Leser ist es, ein vollwertiges Plugin zu verwenden und den Codierungsteil zu ignorieren – der Codierungsteil wird die Dinge nur noch schlimmer machen, wenn Sie keine Codierung kennen. Sie können die Notwendigkeit auf Ihre Entwickler umleiten, aber das ist nicht kostenlos.
Eine weitere großartige alternative Lösung ist die Verwendung von animierten GIFS als Hintergrund. Es gibt zwei Gründe, die für die Verwendung von animierten GIFS sprechen. Der erste ist die geringe Bandbreitennutzung im Vergleich zum Video und der zweite die einfache Installation. Ein weiterer großer Vorteil ist, dass Sie sich wahrscheinlich keine Gedanken über Portabilität und Kompatibilitätsprobleme mit anderen Geräten machen müssen.
Die Animation kann einfach mit dem CSS erstellt oder durch die normale Hintergrundänderung hochgeladen werden.
Die Komplexität des Videohintergrunds ist etwas höher und die WordPress-Community oder das Kernteam können dies zur Kenntnis nehmen und Änderungen in ihren kommenden Versionen vornehmen.
Wenn Sie ein Video haben und es in ein GIF konvertieren möchten, gibt es Online-Ressourcen, die das für Sie erledigen können. Aber die konvertierten GIFs sind nicht optimiert und bringen viel Gewicht mit sich.
Und wenn Sie Anpassungen an dem Video vornehmen müssen, das Sie einbetten möchten, finden Sie einige großartige kostenlose Video-Editoren. Möglicherweise müssen Sie ein Video ausschneiden, zuschneiden oder zoomen, Text hinzufügen oder wahrscheinlich das Farbthema anpassen, damit es dem Stil Ihrer Website entspricht.
Wenn Sie einen Mac verwenden, können Sie natürlich iMovie verwenden, da es bereits auf Ihrem Computer vorinstalliert ist (wenn nicht, können Sie es kostenlos erhalten). Und wenn Sie Windows verwenden, ist VSDC Free Video Editor eine gute Wahl. Es hat buchstäblich alles, was Sie brauchen, vom grundlegenden Toolset zum Teilen/Zuschneiden bis hin zu Farbkorrektur- und Videostil-Voreinstellungen. Außerdem ist es wirklich leistungsfähig, wenn es um Formate geht, und Sie müssen die Qualität der Ausgabedatei nicht opfern.
Glaubst du, ich habe etwas verpasst? Kommentieren Sie unten und lassen Sie es uns wissen.
*zuletzt aktualisiert am 25.02.2019