Viele Website-Betreiber möchten ihre Seiten mit einer automatischen Wiedergabe von eingebetteten Instagram-Videos versehen, um die Aufmerksamkeit der Besucher sofort auf sich zu ziehen.
Leider werden Sie enttäuscht sein, wenn Sie den nativen Code in Ihre Website einfügen und erwarten, dass das Video automatisch abgespielt wird.
Ich weiß genau, wie frustrierend es ist, Zeit mit der Optimierung von HTML zu verbringen, nur um dann festzustellen, dass der Standard-Instagram-Iframe die automatische Wiedergabe komplett blockiert.
Es fühlt sich wie ein großes Hindernis an, wenn man nur möchte, dass die dynamischen sozialen Inhalte auffallen und die Nutzer bei Laune halten.
Die gute Nachricht ist, dass Sie weiterhin die Vorteile von bewegten Videos nutzen können, ohne die Nachteile der fehleranfälligen manuellen Methode in Kauf nehmen zu müssen.
In diesem Leitfaden erkläre ich Ihnen, warum die native Autoplay-Funktion versagt, und zeige Ihnen eine viel bessere Lösung, mit der Sie Ihre Videos einwandfrei anzeigen können.
- Kann man die automatische Wiedergabe bei einem eingebetteten Instagram-Video tatsächlich aktivieren?
- Die beste Methode, um eingebettete Instagram-Videos auf Ihrer Website anzuzeigen
- So binden Sie Instagram-Videos in Ihre Website ein [empfohlene Methode]
- Sind Sie bereit, Instagram-Videos richtig einzubetten?
Kann man die automatische Wiedergabe bei einem eingebetteten Instagram-Video tatsächlich aktivieren?
Nein, Sie können die automatische Wiedergabe bei einem standardmäßig in Instagram eingebetteten Video nicht aktivieren.
Wenn Sie versucht haben, Autoplay zu Ihrem Instagram-Einbettungscode hinzuzufügen, und nichts passiert ist, sind Sie nicht allein.
Anstatt das Video tatsächlich einzubetten, generiert der offizielle Einbettungscode von Instagram einen Iframe, der zeigt, wie das Video aussieht.
Wenn ein Besucher auf das Video klickt, wird er einfach zu Instagram weitergeleitet. Das bedeutet, dass Sie einen Website-Besucher verlieren – was ein großes Problem ist.
Hier eine kurze Zusammenfassung der wichtigsten Informationen:
- The native Instagram embed uses an <iframe>, and browsers block autoplay on <iframe> content from third-party sources by default.
- Das eigene Einbettungssystem von Instagram unterstützt das Attribut „autoplay“ nicht – das Hinzufügen dieses Attributs zum Code hat keine Wirkung.
- Es gibt eine Lösung, mit der Sie das gleiche aufmerksamkeitsstarke Ergebnis erzielen können, ohne sich auf eine fehlerhafte Autoplay-Funktion verlassen zu müssen – und diese werden wir in diesem Leitfaden behandeln.
Ist die automatische Wiedergabe bei Instagram-Einbettungen überhaupt eine gute Idee?
Autoplay kann schnell Aufmerksamkeit erregen, hat jedoch auch echte Nachteile, die Sie abwägen sollten, bevor Sie sich dafür entscheiden.
Die ehrliche Antwort lautet: Es hängt von Ihren Zielen ab, da es auf beiden Seiten echte Kompromisse gibt.
Hier ist eine ausgewogene Betrachtung der Vor- und Nachteile:
| Argumente für die automatische Wiedergabe | Das Argument GEGEN die automatische Wiedergabe |
|---|---|
| Erregt sofort die Aufmerksamkeit der Besucher | Verlangsamt die Ladegeschwindigkeit der Seite – Videos sind große Dateien |
| Hält Nutzer auf der Seite | Nicht durch native Instagram-Einbettungen unterstützt |
| Zeigt dynamische Inhalte an, ohne dass ein Klick erforderlich ist. | Browser blockieren zunehmend Autoplay und Sound |
| Kann für Besucher aufdringlich wirken |
Die gute Nachricht ist, dass es eine Möglichkeit gibt, die Vorteile der automatischen Wiedergabe zu nutzen, ohne dass die Ladegeschwindigkeit der Seite darunter leidet.
Die beste Methode, um eingebettete Instagram-Videos auf Ihrer Website anzuzeigen
Die manuelle Einbettungsmethode für Instagram funktioniert nicht für die automatische Wiedergabe, da Sie keine Kontrolle über das Verhalten des Instagram-Players haben.
When you copy the official embed code from Instagram, it generates an <iframe> tag that loads Instagram’s external player directly onto your page.
Selbst wenn Instagram die automatische Wiedergabe unterstützen würde, würden moderne Browser diese wahrscheinlich ohnehin blockieren.
„Wie Sie vielleicht bemerkt haben, gehen Webbrowser zu strengeren Richtlinien für die automatische Wiedergabe über, um die Benutzererfahrung zu verbessern, Anreize für die Installation von Werbeblockern zu minimieren und den Datenverbrauch in teuren und/oder eingeschränkten Netzwerken zu reduzieren.“
– Chrome für Entwickler
Das Fazit ist, dass die automatische Wiedergabe von eingebetteten Videos von Drittanbietern aus zwei Richtungen gleichzeitig blockiert wird: durch Instagram und durch den Browser selbst.
Der bessere Weg: Erhalten Sie ein Autoplay-ähnliches Verhalten mit Instagram Feed Pro
Instagram Feed Pro ist ein WordPress-Plugin, mit dem Sie die Vorteile der automatischen Wiedergabe nutzen können, ohne die Nachteile in Kauf nehmen zu müssen.
Anstatt beim Öffnen Ihrer Seite eine schwere Videodatei zu laden, zeigt Instagram Feed Pro eine kleine Miniaturansicht an.
Wenn ein Besucher darauf klickt, wird das Video direkt auf Ihrer Website in einem Lightbox-Fenster abgespielt, ohne dass er zu Instagram weitergeleitet wird.
Das bedeutet, dass Sie ein dynamisches, auffälliges Videoerlebnis erhalten, ohne dass die Seitengeschwindigkeit beeinträchtigt wird oder das Risiko besteht, Besucher an Instagram zu verlieren.
Hier ein kurzer Überblick über die Funktionen des Plugins:
- Automatische Aktualisierungen mit Ihren neuesten Instagram-Beiträgen – keine manuelle Aktualisierung erforderlich
- Integrierter visueller Customizer zur Steuerung der Darstellung des Feeds von Instagram-Videos
- Vorgefertigte Designs und Vorlagen, um schnell ein auffälliges Design auszuwählen
- Unterstützt Hashtag-Instagram-Feeds, @Erwähnungen, Fotoalben und Stories.
- Videos werden auf Ihrer Website (in einem Lightbox-Fenster) abgespielt, sodass Besucher Ihre Seite nicht verlassen müssen.
Da Videos erst geladen werden, wenn ein Besucher auf „Abspielen“ klickt, bleibt Ihre Seitengeschwindigkeit hoch, selbst wenn Sie eine Vielzahl von Videos anzeigen.
Dies verbessert nicht nur das Erlebnis für Besucher, sondern ist auch für die Suchmaschinenoptimierung Ihrer Website von Vorteil.
Sind Sie bereit, Instagram-Videos einzubetten und die Vorteile der automatischen Wiedergabe zu nutzen?
Hier können Sie sich für Instagram Feed Pro anmelden!
So binden Sie Instagram-Videos in Ihre Website ein [empfohlene Methode]
Hier finden Sie eine Schritt-für-Schritt-Anleitung, wie Sie Instagram Feed Pro auf Ihrer WordPress-Website einrichten können. Der gesamte Vorgang dauert etwa 5 Minuten.
Schritt 1: Installieren und aktivieren Sie das Instagram Feed Pro Plugin
Um loszulegen, müssen Sie Instagram Feed Pro hier kaufen und herunterladen.
Sobald Sie die Plugin-Datei haben, installieren und aktivieren Sie sie auf Ihrer WordPress-Website (Hilfe zu diesem Schritt finden Sie in dieser Anleitung für Anfänger ).
Schritt 2: Erstellen Sie einen Instagram-Video-Feed
Jetzt ist es an der Zeit, Ihren ersten Instagram-Video-Feed zu erstellen. Gehen Sie in Ihrem WordPress-Dashboard zu Instagram-Feed » Alle Feeds.
Klicken Sie auf die Schaltfläche „Neu hinzufügen“, um den Einrichtungsvorgang zu starten.
Anschließend werden Sie aufgefordert, einen Feed-Typ auszuwählen – Sie können zwischen „Benutzer-Timeline“, „Öffentlicher Hashtag“ oder „Getaggte Beiträge“ wählen .
Sobald Sie Ihre Auswahl getroffen haben, klicken Sie auf Weiter, um fortzufahren.
Schritt 3: Verbinden Sie Ihr Instagram-Konto
Auf dem nächsten Bildschirm müssen Sie Ihr Instagram-Konto verbinden, damit das Plugin Ihre Inhalte abrufen kann. Klicken Sie auf die Schaltfläche „Quelle hinzufügen“, um zu beginnen.
Sie werden aufgefordert, einen Verbindungstyp auszuwählen: entweder „Basic “ oder „Advanced“.
Grundlegende Funktionen für einen einfachen Instagram-Feed, mit dem Sie Ihre eigenen Beiträge anzeigen können.
Andererseits können Sie mit einer erweiterten Verbindung Hashtag-Feeds, Instagram-Stories und Erwähnungen anzeigen.
Wählen Sie diejenige aus, die Ihren Anforderungen entspricht, und klicken Sie dann auf „Verbinden“.
Da wir einen einfachen Feed verwenden, können Sie auf die Schaltfläche „Mit Instagram verbinden“ klicken.
Eine erweiterte Verbindung bedeutet, dass Sie sich über Facebook anmelden müssen, aber ansonsten ist der Vorgang derselbe.
Als Nächstes können Sie dem Plugin Lesezugriff auf Ihr Instagram-Konto gewähren.
Hinweis: Da es sich um einen schreibgeschützten Zugriff handelt, kann das Plugin Ihre Daten nur anzeigen und keine Änderungen vornehmen. Erfahren Sie mehr darüber, warum Smash Balloon sicher ist.
Klicken Sie einfach auf „Zulassen“, um dem Plugin die Berechtigung zum Zugriff auf Ihr Konto zu erteilen.
Wählen Sie abschließend Ihr Instagram-Konto als Quelle aus und klicken Sie auf „Weiter“.
Schritt 4: Passen Sie Ihre Instagram-Videoeinbettungen an
Hier können Sie genau steuern, wie Ihre Instagram-Videos aussehen und welche Inhalte angezeigt werden.
Wählen Sie auf dem folgenden Bildschirm ein Feed-Design aus den Optionen aus. Jedes Design ändert die Farben, Symbole, den Stil der Beiträge und vieles mehr.
Nachdem Sie eine Option ausgewählt und auf „Weiter“ geklickt haben.
Als Nächstes wählen Sie eine Vorlage aus, die zu Ihrem Design passt. Jede Vorlage zeigt Ihre Beiträge in einem anderen Layout an.
Wie zuvor können Sie auf „Weiter“ klicken, um Ihre Auswahl zu bestätigen.
Feed filtern, um nur Videos anzuzeigen
Wenn Sie möchten, können Sie diesen Feed verwenden, um Instagram-Videos und -Fotos gleichzeitig einzubetten.
Um nur Videos anzuzeigen, klicken Sie zunächst oben auf „Einstellungen“ und wählen Sie „Filter und Moderation“.
Scrollen Sie nach unten zum Abschnitt „Bestimmte Arten von Beiträgen anzeigen “.
Deaktivieren Sie die Option „Fotos“, damit Ihr Feed nur Videoinhalte anzeigt.
Anschließend können Sie auswählen, ob Sie Feed-Videos, Reels oder beides anzeigen möchten.
Wenn Sie mit Ihrer Auswahl zufrieden sind, klicken Sie auf „Änderungen speichern“.
Klicken Sie nun auf die Schaltfläche „Einstellungen“, um den visuellen Customizer erneut zu öffnen.
Klicken Sie diesmal oben auf die Registerkarte „Anpassen “.
Auswahl eines Feed-Layouts
Auf der rechten Seite sehen Sie eine Live-Vorschau Ihrer Instagram-Einbettungen. Und auf der linken Seite finden Sie ein Fenster mit den Anpassungsoptionen.
Klicken Sie zunächst auf „Feed-Layout“, um die verfügbaren Layouts anzuzeigen.
Danach zeigt das Panel 4 Layouts an, aus denen Sie wählen können: Raster, Karussell, Masonry oder Highlight.
Ein Raster eignet sich hervorragend, um viele Instagram-Beiträge auf einmal anzuzeigen. Andererseits können Sie ein Masonry-Layout verwenden, um die ursprünglichen Proportionen Ihrer Instagram-Videos beizubehalten.
Sie können auch ein Karussell-Layout verwenden, um Ihre Website interaktiv zu gestalten, oder bestimmte Videos mit einem Highlight-Layout hervorheben.
Klicken Sie auf „Speichern“, sobald Sie Ihr Layout ausgewählt haben.
Anpassen des Beitragsstils
Kehren wir zunächst zu den wichtigsten Anpassungsoptionen zurück. Klicken Sie einfach oben links auf die Schaltfläche „Anpassen “.
Klicken Sie im Customizer auf „Beiträge“, um die Darstellung einzelner Beiträge anzupassen.
Von hier aus können Sie das Aussehen jedes Instagram-Beitrags anpassen, mit Optionen wie:
- Post-Stil
- Bilder und Videos
- Bildunterschrift
- Zusammenfassung der Likes und Kommentare
- Hover-Zustand
Klicken Sie vorerst hier auf die Option „Beitragsstil “.
Unter „Beitragsstil“ können Sie je nach gewünschtem Erscheinungsbild zwischen „Boxed“ und „Regular“ wählen.
Klicken Sie wie zuvor auf „Speichern“, um Ihre Änderungen zu speichern, bevor Sie fortfahren.
Ein Videofenster wird separat von Ihrem Hintergrund angezeigt, und Sie können die Hintergrundfarbe, die Rahmengröße und den Schatten auswählen.
Ebenso wird ein reguläres Instagram-Video ohne Trennung auf der Seite oder im Hintergrund der Seitenleiste eingebettet.
Schritt 5: Fügen Sie Instagram-Videoeinbettungen zu Ihrer Website hinzu
Sobald Ihre Instagram-Videos eingerichtet und angepasst sind, können Sie sie Ihrer Website hinzufügen.
Instagram Feed Pro bietet Ihnen zwei einfache Möglichkeiten, dies zu tun: auf einer Seite oder in einem Widget-Bereich in der Seitenleiste oder Fußzeile.
So zeigen Sie eingebettete Instagram-Videos auf einer Seite an
Klicken Sie oben auf die Schaltfläche „Einbetten“, um zu erfahren, wie Sie Instagram-Inhalte zu Ihrer Website hinzufügen können.
Wie Sie sehen können, stellt Ihnen Instagram Feed Pro einen Shortcode zur Verfügung oder ermöglicht Ihnen die Anzeige von Videos auf einer Seite oder in einem Widget.
Im Popup-Fenster können Sie auf „Zu einer Seite hinzufügen“ klicken.
Hier sehen Sie eine Liste der Seiten, die Sie auf Ihrer Website veröffentlicht haben.
Wählen Sie die WordPress-Seite aus, auf der der Feed angezeigt werden soll, und klicken Sie dann auf „Hinzufügen“.
Sobald Sie sich im Seiteneditor befinden, klicken Sie auf das Plus-Symbol (+), um einen neuen Block hinzuzufügen.
Dies funktioniert wie jeder andere WordPress-Block – Sie müssen sich nicht mit Einbettungscodes herumschlagen.
Suchen Sie nach „Instagram“ und wählen Sie aus den Ergebnissen den Block „Instagram-Feed“ aus.
Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf „Veröffentlichen“, um den Feed auf Ihrer Seite live zu schalten.
So zeigen Sie eingebettete Instagram-Videos in Ihrer Seitenleiste oder Fußzeile an
Sie können Ihre Videos auch zu einem Widget-Bereich hinzufügen, wenn Sie dies bevorzugen. Dies funktioniert nur, wenn Ihr WordPress-Theme Sidebar- oder Footer-Widgets unterstützt.
Gehen Sie zunächst zu Instagram-Feed » Alle Feeds und klicken Sie auf Ihren erstellten Instagram-Video-Feed.
Klicken Sie wie zuvor auf die Option „Einbetten“, um das Popup-Fenster zu öffnen.
Sie sehen dieselben Optionen wie zuvor.
Klicken Sie diesmal im Popup-Fenster auf die Option „Zu einem Widget hinzufügen ”.
Nach einer Sekunde Wartezeit leitet Sie das Plugin zur Widgets -Seite Ihrer Website weiter.
Wählen Sie hier das Seitenleistenfenster oder das Fußzeilen fenster aus.
Der letzte Schritt ist in beiden Fällen derselbe, wählen Sie also den gewünschten Speicherort für Ihre Videos aus.
Klicken Sie auf das Plus-Symbol (+) im Widget-Bereich und wählen Sie das Instagram-Feed -Widget aus, um es hinzuzufügen.
Ihr Video-Feed wird nun in dem von Ihnen ausgewählten Widget-Bereich auf Ihrer Website angezeigt.
Sind Sie bereit, Instagram-Videos richtig einzubetten?
Wenn Sie möchten, dass Ihre Instagram-Videos Besucher ansprechen, ohne Ihre Website zu verlangsamen oder Besucher zu Instagram weiterzuleiten, ist Instagram Feed Pro die einfachste Lösung, die wir getestet haben.
Sie profitieren von der visuellen Wirkung der automatischen Wiedergabe, blitzschnellen Ladezeiten und vollständiger Kontrolle über das Design Ihres Instagram-Videos.
Sind Sie bereit, Instagram-Videos in Ihre Website einzubetten? Holen Sie sich hier eine Kopie von Instagram Feed Pro!
Während Sie hier sind, können Sie sich auch diese Anleitung ansehen, wie Sie den Instagram-Chat zu Ihrer WordPress-Website hinzufügen können.
