Ultimativer Leitfaden zur Verwendung von Videos mit Divi

Video ist ein mächtiges Werkzeug. Wenn ein Bild mehr sagt als tausend Worte, dann sagt eine Minute Video 1,8 Millionen Worte (zumindest schlägt das der Forscher Dr. James McQuivey vor). Video ist ein effektives Marketinginstrument und, richtig gemacht, ein Instrument für schönes Design.

Das Hinzufügen eines Videos zu Ihrer Website ist mit Divi ganz einfach. Mit den Video- und Video-Slider-Modulen können Sie von Drittanbietern gehostete Videos wie YouTube und Vimeo hinzufügen, indem Sie einfach die Video-URL eingeben. Sie können sogar Ihre eigenen benutzerdefinierten Videos im MP4- und Webm-Format hinzufügen, um maximale Browserkompatibilität zu erzielen. Um das Ganze abzurunden, bietet Divi Ihnen die Möglichkeit, Ihre Videos mit Bildüberlagerungen und Wiedergabeschaltflächen zu gestalten, um sie an das Design Ihrer Website anzupassen.

Zusätzlich zum Einbetten von Videos auf Ihrer Seite bietet Divi auch eine einfache Lösung zum Hinzufügen von Hintergrundvideos. Wenn Sie derzeit eine Site mit dem Divi-Builder erstellen, verfügen jeder Abschnitt, jede Zeile, jede Spalte und 20 von 37 Modulen über Hintergrundvideofunktionen.

Für die meisten Leute ist die Verwendung von Video in Divi so einfach wie das Einfügen des Links zu dem gewünschten YouTube- oder Vimeo-Video und das Anzeigen in Ihrem Beitrag oder Ihrer Seite. Aber in diesem Beitrag werden wir darüber sprechen, wie und warum Divi das macht, was es mit Video macht, damit Sie für spezielle Anwendungsfälle, einzigartige Stile oder kreative Experimente, die Sie durchführen möchten, vollständig gerüstet sind.

In diesem Leitfaden besprechen wir…

• hinter den Kulissen des Video-Moduls und des Video-Slider-Moduls, damit Sie es effektiver nutzen können.
• den Unterschied zwischen dem Selbst-Hosting Ihrer Videos und der Verwendung eines Drittanbieter-Hosts.
• einige Tipps zur Optimierung Ihrer Videos für das Web.
• Best Practices für Videohintergründe.
• eine allgemeine Anleitung zur Auswahl der Videoabmessungen.
• und ein paar hilfreiche Hacks für Hintergrundvideos.

Lass uns anfangen.

Erkunden des Videomoduls

Mit dem Videomodul können Sie Videos aus nahezu jeder Quelle in Ihre Seite einbetten. Die Dokumentation von Divi zum Videomodul erklärt alle Funktionen und wie Sie Ihrer Seite ein Video hinzufügen. Aber für diesen Beitrag werde ich etwas tiefer graben.

Hinzufügen eines selbst gehosteten Videos zum Videomodul

Um ein selbst gehostetes Video mit dem Videomodul hinzuzufügen, müssen Sie ein Video hochladen oder in den Videoeinstellungen eine URL zur Videodatei hinzufügen. Und Sie müssen Ihr Video in zwei Dateiformaten hinzufügen.

Und das ist alles, was Sie wirklich tun müssen. Einfach genug.

Hinter den Kulissen verwendet Divi jedoch das HTML5-Videoelement, um das Video anzuzeigen. Wenn Sie sich entscheiden, ein selbst gehostetes Video hinzuzufügen oder Ihr eigenes Video im MP4- und Webm-Format hochzuladen, sieht die Struktur des von Divi bereitgestellten Codes in etwa wie folgt aus:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

Hier sind ein paar Dinge, auf die ich hinweisen möchte, was dieser Code macht:

1. Beachten Sie das Attribut control im <video>-Tag. Dies weist das Video an, die Steuerelemente anzuzeigen. Einfach genug.
2. Beachten Sie die beiden <source>-Tags innerhalb der öffnenden und schließenden <video>-Tags. Die Quellen bestehen aus Videodateien. Das erste ist ein MP4- und das zweite ein Webm-Dateiformat. Beides ist für eine maximale Browserunterstützung erforderlich. Auch die Reihenfolge ist wichtig. Sie möchten, dass der Browser die mp4 zuerst sieht, da sie am universellsten unterstützt wird. Ich werde später mehr auf diese Formate eingehen.
3. Die Zeile „Fehler beim Laden dieser Ressource“ wird angezeigt, wenn die ersten beiden Formate nicht erkannt werden.
4. Was Sie nicht sehen können, ist, dass Divi dieses <video>-Tag gestylt und mit einer Breite von 100 % versehen hat, damit es reaktionsschnell ist, sodass sich Ihr Video an die Breite der Spalte anpasst, in der es sich befindet.

Dieses HTML5-Videoelement entwickelt sich als neue Standardmethode zum Anzeigen von Videos im Web. Zum Glück kümmert sich Divi für uns darum.

Selbst gehostetes Videobild-Overlay

Abgesehen von der Option, Ihre Videos zum Videomodul hinzuzufügen, können Sie mit Divi auch ein benutzerdefiniertes Overlay-Bild für Ihr Video hinzufügen.

Wenn Sie Ihrem selbst gehosteten Video ein Overlay-Bild hinzufügen möchten, müssen Sie Ihr eigenes hochladen. Die Option, das Bild aus einem Video zu generieren, gilt nur für von Drittanbietern gehostete Video-URLs wie Youtube und Vimeo.

Da das Bild die Größe des Videos annimmt und sich das Video an die Größe der Spalte anpasst, in der es sich befindet, ist es wichtig, die richtige Bildgröße zu wählen. Videos von Youtube, Vimeo und den meisten anderen Formaten haben normalerweise ein Seitenverhältnis von 16:9. Wenn Sie also Ihre maximale Inhaltsbreite auf Divis Standard von 1080px eingestellt haben, hat Ihr Video gemäß dem Seitenverhältnis von 16:9 die Abmessungen von 1080 × 608. Daher sollte Ihr Overlay-Bild 1080×608 Pixel groß sein.

Der Play-Button

Sobald Ihr Bild eingerichtet wurde, wendet Divi automatisch eine benutzerdefinierte Wiedergabeschaltfläche an. Sie können sogar die Farbe der Schaltfläche ändern, wenn Sie möchten, in den Videoeinstellungen auf der Registerkarte Design.

Sobald der Benutzer mit der benutzerdefinierten Wiedergabeschaltfläche auf das Overlay klickt, werden das Overlay und die Schaltfläche ausgeblendet und das Video unter dem Overlay wird automatisch abgespielt.

Hinzufügen einer von Drittanbietern gehosteten Video-URL

Die gängigste Methode zum Hinzufügen eines Videos zum Videomodul besteht darin, einfach die URL eines Videos hinzuzufügen, das von einem Drittanbieter wie Youtube oder Vimeo gehostet wird. Anstatt also die beiden Videoformate hinzuzufügen, wie Sie es bei selbst gehosteten Videos tun würden, fügen Sie einfach eine URL in die obere Hintergrundeingabeleiste ein.

Hinter den Kulissen fügt Divi ein Wrapper-Div mit flüssiger Breite hinzu und bettet einen Iframe ein, der das Video anzeigt. Dieser iframe ist der gleiche, den Sie direkt von YouTube erhalten würden. Hier ist ein Beispiel dafür, wie der Code aussieht, wenn ein YouTube-Video mit dem Videomodul hinzugefügt wird:

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

Das div mit der Klasse „fluid-width-video-wrapper“ umschließt den iframe und gibt ihm eine Breite von 100%, damit es sich an die Breite seines Containers anpasst und es reagiert.

Wenn Sie ein Overlay-Bild hinzufügen möchten, können Sie Ihr eigenes hochladen oder, um ein wenig Kopfschmerzen zu vermeiden, einfach auf „Aus Video generieren“ klicken und Divi wendet automatisch ein Overlay-Bild aus dem Video an. Sie können auch die Wiedergabeschaltfläche anpassen.

Erkunden des Video-Slider-Moduls

Der Video-Slider funktioniert sehr ähnlich wie das Video-Modul in der Art und Weise, wie Videos auf einer Webseite bereitgestellt werden, außer dass sich die Videos jetzt in einem Slider befinden. Dies ist eine bequeme Möglichkeit, Videos an einem Ort anzuzeigen, sodass Ihre Benutzer einfach einzeln durch eine Gruppe von Videos scrollen können. Weitere Informationen zu den Optionen des Video-Slider-Moduls finden Sie auf der Dokumentationsseite.

Eines meiner Lieblingselemente des Video-Sliders ist die Miniaturansicht, mit der Sie die Folien steuern können. Es ist sowohl bequem als auch ansprechend.

Sie können sogar die Farben der Schieberegler in den Moduleinstellungen anpassen, einschließlich der Thumbnail Overlay Color.

Die Miniaturbilder behalten die Größe des von Ihnen hochgeladenen Originalbilds. Achten Sie also darauf, nicht zu viele große Bilder in Ihren Schieberegler hochzuladen, da dies Ihre Website verlangsamen könnte. Außerdem können die Thumbnails nicht automatisch aus dem Video generiert werden. Diese müssen Sie selbst hochladen.

Die Miniaturansichten haben ein Seitenverhältnis von 4:3. Um Ihre 16:9-Schieberegler-Bilder anzupassen, wird sie rechts und links des Bildes aufgeblasen und abgeschnitten, um den gesamten Raum abzudecken.

Design-Tipp : Ein Trick, den Sie tun können, um die Dateigröße zu reduzieren und zu verhindern, dass Ihre Miniaturansichten einen Teil des Bildes abschneiden, besteht darin, Ihre Miniaturansichten auf 253 × 190 Pixel (ein 4: 3-Seitenverhältnis) anzupassen und die Option zum Ausblenden auszuwählen Zeigen Sie Bildüberlagerungen auf dem Hauptvideo an. Auf diese Weise werden Ihre Overlay-Bilder nur für Miniaturansichten verwendet und müssen daher nicht größer sein, um sie an die Hauptvideogröße anzupassen.

4 wichtige Tipps für das Self-Hosting Ihrer Videos

1. Verwenden Sie ein CDN. Wenn Sie darüber nachdenken, Ihre Videos über die WordPress-Medienbibliothek hinzuzufügen, denken Sie noch einmal darüber nach. Obwohl es möglich ist, Videos auf Ihrer eigenen WordPress-Installation auf Ihrem eigenen Server zu hosten, werden Sie wahrscheinlich auf einige Einschränkungen in Bezug auf Bandbreite, Dateigröße, Speicherplatz usw. stoßen, was dazu führen kann, dass die Ladezeit Ihrer Website leidet und das Video-Streaming verzögert wird . Ich würde in Betracht ziehen, deine Videos bei einem externen Dienst wie Amazons3 zu hosten. Dies hilft bei den Seitenladezeiten. Außerdem bieten einige dieser Anbieter ein Sicherheitsniveau, um das Herunterladen Ihrer Videos zu verhindern (oder das Herunterladen zumindest zu erschweren).
2. Datei für das Web optimieren. Videos beanspruchen viel Bandbreite, insbesondere wenn Sie einen großen Videohintergrund verwenden. Sie müssen aufpassen, dass Sie Ihre Seite nicht überladen. Es gibt eine Reihe von Faktoren, die Sie berücksichtigen müssen, wenn Sie Ihr Video richtig für das Web optimieren möchten. Hier ist eine hilfreiche Gleichung, die Sie berücksichtigen sollten:
   Dateigröße = Bitrate (Kilobit pro Sekunde) x Dauer (Länge des Videos in Sekunden)

   Wenn Sie also eine kleinere Dateigröße erhalten möchten, müssen Sie die Dauer (die Videolänge) und/oder die Bitrate (die Anzahl der übertragenen Kilobits pro Sekunde) reduzieren. Die Bitrate sollte immer niedriger sein als die Verbindungsgeschwindigkeit des Benutzers. Wenn man bedenkt, dass die weltweite Internetgeschwindigkeit etwa 7 Mbit/s beträgt (in den USA etwa 18 Mbit/s), sollten Sie die Bitrate deutlich darunter halten, um eine Unterbrechung des Streamings zu vermeiden.

   Das müssen Sie nicht alleine machen. Es gibt einige großartige kostenlose Tools, die Ihnen bei der Videokomprimierung wie Handbrake helfen.

   Wenn Sie mehr über die Optimierung Ihrer Videos für das Web erfahren möchten, empfehle ich Ihnen, „Die 5 besten Möglichkeiten zur Reduzierung der Videogröße für schnelleres Laden“ zu lesen. Es sind einige großartige Ressourcen aufgeführt und eine großartige Erklärung zur Verwendung von Handbrake.

3. Korrekte Dateiformate hinzufügen.
   Wie ich bereits erwähnt habe, müssen Sie Ihr Video sowohl im MP4- als auch im Webm-Format hinzufügen, wenn Sie Ihre Videos selbst hosten (und nicht auf einen Drittanbieter angewiesen sind, der sie für Sie hostet, wie z. B. Youtube).

   MP4 ist derzeit das am weitesten verbreitete Format, da es immer noch einige der alten Browser mit Flash abspielt und der Standard für die Unterstützung von mobilen Browsern ist. Divi listet mp4 zuerst im Code auf, damit iOS-Geräte die Datei sofort erkennen können.

   Webm ist das am zweithäufigsten unterstützte Format. Es wurde für das Web entwickelt und scheint hier zu bleiben. Es produziert qualitativ hochwertiges Streaming mit hervorragender Komprimierung. Und es ist Open Source.

   Zusammen bieten diese beiden Unterstützung für die meisten Webbrowser, einschließlich mobiler Browser.

   Ein großartiges kostenloses Konvertierungstool wäre der VLC Media Player.

4. MIME-Typen definieren: Damit das WEBM-Videoformat in allen Browsern funktioniert, müssen Ihrem Server die richtigen MIME-Typen zugewiesen sein. Hier erfahren Sie mehr über die Verwendung von .htaccess zum Definieren von MIME-Typen. Wenn Sie feststellen, dass Ihre Videos in bestimmten Browsern nicht abgespielt werden, ist dies wahrscheinlich der Grund. Um MIME-Typen zu Ihrer .htaccess-Datei hinzuzufügen, verwenden Sie einen FTP-Client (wie FileZilla), um auf Ihre WordPress-Root-Dateien zuzugreifen. Dort sollten Sie Ihre .htaccess-Datei finden. Öffnen Sie die Datei in einem Texteditor. Fügen Sie unter der Zeile „#END WordPress“ Folgendes hinzu:

   AddType video/mp4 .mp4 .m4v
   AddType video/ogg .ogv
   AddType video/webm .webm

   

   Speichern Sie dann die Datei. Jetzt werden Ihre Videoformate in allen Browsern erkannt.

Hosting mit Plattformen von Drittanbietern (Youtube und Vimeo)

Wenn Sie feststellen, dass das Konvertieren und Komprimieren Ihrer eigenen Videos einfach zu viel Arbeit ist, können Sie jederzeit einen Dritten die Arbeit für Sie erledigen lassen.

Wenn Sie nichts über Video wissen, empfehle ich Ihnen, diesen Weg einzuschlagen. Wenn Sie nicht verrückt nach den Einschränkungen von YouTube oder Vimeo Free sind, können Sie für Vimeo Pro in den sauren Apfel beißen. Es kann auf Dauer die Kopfschmerzen wert sein. Was Sie nicht möchten, ist, ein Video auf Ihrer Website zu platzieren, das sie verlangsamt oder schlecht aussieht. Es lohnt sich einfach nicht.

Videoplattformen von Drittanbietern, die von den Video- und Video-Slider-Modulen unterstützt werden

Wenn Sie die Video- und Video-Slider-Module verwenden möchten, um Ihre Videos von Drittanbietern hinzuzufügen, können Sie die folgenden beliebten Plattformen verwenden:

• Youtube
• Vimeo
• Tägliche Bewegung

So fügen Sie Videos von Drittanbietern mit Divi . hinzu

Um ein Video von einer dieser Plattformen hinzuzufügen, müssen Sie deren Website aufrufen, um den Freigabelink zu erhalten.

Dann können Sie das in das Video- oder Video-Slider-Modul einfügen.

Klicken Sie auf die Schaltfläche „Aus Video generieren“, um eine Bildüberlagerung hinzuzufügen. Oder laden Sie einen eigenen hoch.

Einstellungen speichern. Und das ist es.

Denken Sie daran, dass Divi auf WordPress basiert, sodass Sie jederzeit Videos von Drittanbieterplattformen mithilfe der vorgeschlagenen Einbettungscodes einbetten können, ohne das Videomodul zu verwenden. Fügen Sie einfach ein Textmodul hinzu und geben Sie den Einbettungscode in das Inhaltsfeld ein.

Möglicherweise müssen Sie die Breite und Höhe Ihrer Einbettung anpassen, um ein responsives Layout zu erhalten.

Was ist mit Wistia?

Wistia ist eine leistungsstarke Plattform, die viele Leute verwenden, aber leider funktioniert sie derzeit nicht gut mit Divi-Modulen. Sie können Wistia jedoch mit dem bereitgestellten Einbettungscode einbetten.

Wenn Sie diesen Code in einen Inhaltsbereich auf Ihrer Divi-Site einfügen, wird das Video angezeigt.

Sie können den Code sogar in den Inhaltsbereich des Slider-Moduls einfügen, um ein Wistia-Video als eine Ihrer Folien hinzuzufügen. Sie müssen jedoch einige CSS anpassen, damit es so aussieht, wie Sie es möchten.

Verwenden von Videohintergründen mit Divi

Sollten Sie sogar einen Videohintergrund verwenden?

Bevor wir auf die Details von Videohintergründen eingehen, ist es wichtig, dass Sie sich ehrlich fragen, ob Sie überhaupt einen verwenden sollten oder nicht. Versteh mich nicht falsch, ich liebe einen guten Videohintergrund. Aber manchmal macht es einfach keinen Sinn. Machen Sie keinen Fehler, Videos verlangsamen Ihre Website und können von Ihren Inhalten ablenken. Wählen Sie also niemals einen Videohintergrund über einem effektiveren Bild. Ihre Site kann ohne eine besser sein.

Aber manchmal ist Video eine bessere Lösung als ein Bild. Wenn es richtig gemacht wird, kann ein Videohintergrund Ihre Inhalte zum Leben erwecken. Gestalten Sie Ihr Video also zielgerichtet und lassen Sie es zählen.

Video-Hintergrundfunktionen innerhalb von Divi

Mit dem Divi Builder können Sie fast überall einen Videohintergrund hinzufügen. Sie können jedem Abschnitt, jeder Zeile und jeder Spalte einen Videohintergrund hinzufügen. Sie können den meisten Modulen sogar Videohintergründe hinzufügen.
Hier sind die Module, die Videohintergründe unterstützen.

• Fullwidth Header (funktioniert auch bei Vollbildoption)
• Menü in voller Breite
• Portfolio in voller Breite
• Post Slider in voller Breite (Wenn Sie das vorgestellte Bild nicht verwenden, können Sie einen Videohintergrund als Hintergrund für alle Folien verwenden)
• Post-Titel in voller Breite
• Fullwidth Slider (funktioniert mit einzelnen Folien)
• Audiomodul
• Bartheken
• Blurb-Modul – achten Sie nur darauf, dem Modul etwas Polsterung zu geben.
• Call-to-Action-Modul
• Countdown-Timer
• E-Mail-Option
• Filterbares Portfolio
• Login-Modul
• Zahlenzählermodul
• Personenmodul
• Portfolio-Einstellungen
• Post Slider (Wenn Sie das vorgestellte Bild nicht verwenden, können Sie einen Videohintergrund als Hintergrund für alle Folien verwenden)
• Beitragstitel
• Preistabelle (Sie können einen Videohintergrund für das Modul und für verschiedene Tabellen individuell einstellen)
• Slider (nur für Hintergründe einzelner Folien)
• Registerkarten (sowohl für Modulhintergrund als auch für einzelne Registerkarten)
• Zeugnis
• Text
• Umschalten

Stockvideobibliotheken

Der schwierige Teil beim Hinzufügen eines Videohintergrunds zu Ihrer Website besteht darin, das richtige Bild zu finden und sicherzustellen, dass es die richtige Größe hat. Zum Glück müssen Sie keine eigenen benutzerdefinierten Videohintergründe erstellen. Es gibt lizenzfreie Stock-Videobibliotheken, die für Ihre Website gut funktionieren können. Wenn Sie nach kostenlosem Videomaterial suchen, sind Videvo, Coverr oder Videezy einige gute Ausgangspunkte. Wenn Sie nach kostenpflichtigen Versionen mit besserer Qualität suchen, können Sie sich Videohive, Videoblocks oder Pond5 ansehen. Einige dieser Websites verwenden Videohintergründe sehr gut, wenn Sie nach Inspiration suchen.

So fügen Sie Ihrer Seite einen Videohintergrund hinzu

Nachdem Sie das richtige Video gefunden (oder erstellt) haben, wird es ganz einfach. Um Ihrer Divi-Webseite einen Videohintergrund hinzuzufügen, stellen Sie einfach den Visual Builder bereit und suchen Sie den Abschnitt, in dem Sie das Video hinzufügen möchten, und klicken Sie auf das Symbol Abschnittseinstellungen.

Klicken Sie auf der Registerkarte Inhalt auf das Hintergrundbildsymbol/-register unter den Hintergrundoptionen. Wenn Sie ein selbst gehostetes Video haben, geben Sie sowohl das MP4- als auch das Webm-Format ein. Geben Sie dann die Abmessungen des Videos ein, damit Divi weiß, wie es richtig dimensioniert wird.

Gehen Sie nun zur Registerkarte Hintergrundbild und fügen Sie ein Hintergrundbild hinzu, das als guter Fallback für mobile Geräte dienen würde.

Speichern Sie dann die Einstellungen. So einfach ist das.

Wenn Sie vorhatten, eines Ihrer Videos, das Sie jetzt auf YouTube (oder Vimeo) hosten, als Hintergrund zu verwenden, ist dies derzeit im Divi-Builder nicht möglich. Denken Sie daran, dass Sie diese Videos in den richtigen Formaten benötigen, um in allen Browsern angezeigt zu werden. Sie können dieses Youtube-Video jedoch herunterladen (wenn es Ihnen gehört) und in die Formate mp4 und webm konvertieren, um es auf Ihrem Hintergrund zu verwenden.

Hintergrunddesign-Tipp: Verwenden eines Videohintergrunds für Ihren Post-Slider in voller Breite

Wenn Sie nach einer kreativen Möglichkeit suchen, Ihre vorgestellten Posts auf Ihrer Blog-Seite zu präsentieren, können Sie Ihrem Post-Slider einen Videohintergrund hinzufügen. Lassen Sie mich Ihnen zeigen, was ich meine.

Rufen Sie Ihre Seite mit dem Visual Builder auf und fügen Sie oben auf der Seite einen Abschnitt mit voller Breite mit einem Post-Slider-Modul in voller Breite hinzu.

Wählen Sie auf der Registerkarte "Inhalt" unter "Ausgewähltes Bild anzeigen" die Option "NEIN".

Wählen Sie dann im Abschnitt Hintergrund die Registerkarte Videohintergrund aus und fügen Sie beide Formate Ihres Videos zusammen mit den Abmessungen hinzu.

Es ist auch eine gute Idee, ein Hintergrundbild als Fallback für Mobilgeräte hinzuzufügen, die keine Videohintergründe anzeigen können.

Das ist es.

Jetzt kann der Benutzer mit einem coolen Hintergrundvideo durch Ihren Featured Post-Slider scrollen. Stellen Sie nur sicher, dass der Videohintergrund dezent genug ist, um nicht vom Inhalt abzulenken.

Best Practices für Videohintergründe

Bei all den Möglichkeiten, die Videohintergründe bieten, hielt ich es für das Beste, einige allgemeine Best Practices einzubeziehen.

1. Fügen Sie immer ein Hintergrundbild als Fallback für Mobilgeräte hinzu. Auf Mobilgeräten werden große Videos nicht automatisch wiedergegeben. Aus diesem Grund zeigt Divi das Fallback-Image standardmäßig auf mobilen Geräten an.
2. Verwenden Sie ein kleines Video. Bei Hintergrundvideos können Sie mit einer 720p-Auflösung davonkommen, da der Hintergrund ein zweiter Gedanke an den Inhalt / Text ist, der das Video überlagert. Die Qualität wird nicht so stark leiden, dass Sie es bemerken würden.
3. Betrachten Sie eine Überlagerung. Das Hinzufügen einer halbtransparenten Farbüberlagerung über dem Video hilft Ihnen, mit einer geringeren Dateigröße davonzukommen, da es die unordentlichen Details eines Videos mit geringerer Qualität verbirgt. Außerdem wird Ihr Text dadurch besser hervorgehoben.
4. Verwenden Sie kein Audio. Sie brauchen keinen Ton für Videohintergründe, also nehmen Sie ihn heraus. Dadurch wird die Dateigröße reduziert.
5. Verwenden Sie sowohl mp4- als auch webm-Formate für die browserübergreifende Unterstützung.

Video anhalten?

Möglicherweise haben Sie diese Option in den Einstellungen unter Hintergrundoptionen aufgeführt.

In einigen Fällen kann es zu Konflikten zwischen dem Video und einem anderen Videohintergrund bei der Tonwiedergabe kommen. Diese Option hilft dabei, immer nur einen Videoton gleichzeitig abzuspielen.

Divi-Video-Hacks

Es gibt einige erweiterte Anpassungen von Video und Videohintergrund, die Sie möglicherweise hilfreich finden. Hier sind ein paar.

Ändern Sie die Größe Ihres Play-Buttons

Wenn Sie die Größe Ihrer Wiedergabeschaltfläche ändern möchten, gehen Sie zu den Videomoduleinstellungen auf der Registerkarte Erweitert und geben Sie das folgende benutzerdefinierte CSS in das Feld mit der Bezeichnung "Videosymbol" ein:

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

Sie können die Werte an die gewünschte Größe anpassen. Stellen Sie nur sicher, dass Schriftgröße und Zeilenhöhe immer gleich bleiben und Rand-oben und Rand-unten immer einen negativen Wert haben, der der Hälfte der Schriftgröße entspricht. Wenn Sie es beispielsweise verkleinern möchten, wären die Werte.

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

So stoppen Sie das Anhalten des Videohintergrunds beim Klicken

In einigen Fällen können Sie feststellen, dass das Klicken auf Ihren Videohintergrund das Video anhält. Sie können diese Funktion deaktivieren, indem Sie das folgende benutzerdefinierte CSS zu Ihrer style.css-Datei in Ihrem Child-Theme (oder in Theme-Anpasser > Zusätzliches CSS) hinzufügen:

.et_pb_section_video_bg video {
pointer-events: none;
}

So stoppen Sie das Loopen des Videohintergrunds

Vielleicht haben Sie sich an diesen Tipp aus einem unserer älteren Beiträge erinnert. Standardmäßig wird der Videohintergrund in einer Schleife fortgesetzt. Dies ist beabsichtigt, da dies normalerweise das ist, was ein Videohintergrund tun soll. Wenn Sie Ihr Hintergrundvideo jedoch nur einmal anzeigen und dann beenden möchten, können Sie die Schleifenaktion deaktivieren, indem Sie zu Divi > Themenoptionen > Integration gehen und Folgendes in das Feld eingeben:

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

Videoabmessungen für Divi

Ich wollte den Beitrag nicht beenden, ohne die Videoabmessungen zu erwähnen. Es gibt keine feste Regel für die zu verwendenden Dimensionen, da alle Videos und Websites unterschiedlich sind. Ein 720p (1280×720) Video kann auf einem 1920×1080 Bildschirm gut gestreckt aussehen, während ein anderes schrecklich aussieht. Bei der Entscheidung über die Abmessungen oder Auflösung eines Videos für Ihre Site können Sie sich als allgemeine Richtlinie an die Bildabmessungen für die Spaltenlayouts und Module von Divi halten. Einfach ausgedrückt sollte Ihr Video der Breite der Spalte, in der es sitzt, am nächsten sein, ohne unterzugehen. Wenn Sie also eine Spalte mit voller Breite mit einer maximalen Breite von 1080px haben, sollten Sie kein Video mit einer Auflösung von mehr als 720p (1280×720) benötigen. Wenn Sie jedoch einen Videohintergrund verwenden, der die volle Breite Ihres Browsers umfasst, müssen Sie möglicherweise bis zu 1080p (1920 × 1080) erhöhen, damit dies nicht der Fall ist, wenn er die volle Breite des Browsers auf größeren Monitoren umfasst. sehen grobkörnig aus.

Wenn Sie sich bei der Vorbereitung Ihrer Videos für das Web auf einen Videoprofi von Drittanbietern verlassen möchten, finden Sie hier eine Liste der empfohlenen Videoauflösungen für YouTube.

2160p: 3840×2160
1440p: 2560×1440
1080p: 1920×1080
720p: 1280×720
480p: 854×480
360p: 640×360
240p: 426×240

Diese folgen dem Seitenverhältnis 16:9, sodass Sie die schwarzen Balken an den Seiten des Videos nicht sehen.

Vimeo gibt auch Richtlinien für Videos. Ich mag besonders den Beitrag von Vimeo zu den Grundlagen der Videokomprimierung.

Abschließende Gedanken

Videos werden noch lange ein fester Bestandteil unseres Online-Erlebnisses sein. Daher ist es wichtig, dass Sie wissen, was Sie tun, wenn Sie Videos zu Ihrer Website hinzufügen. Wenn Sie sich für die Verwendung von Videos auf Ihrer Website entscheiden, macht Divi den Prozess extrem einfach und bietet eine browserübergreifende Lösung für selbst gehostete Videos und eine bequeme Lösung für Einbettungen von Drittanbietern. Aber Divi kann nicht alles für dich tun. Hoffentlich hilft Ihnen dieser Beitrag bei der Auswahl des richtigen Videos und der Vorbereitung für das Web.

Ich freue mich von Ihnen in den Kommentaren zu hören.