So betten Sie einen YouTube-Livestream in WordPress ein

Veröffentlicht: 2023-04-24

Möchten Sie einen YouTube-Livestream auf Ihrer WordPress-Website einbetten?

Das Einbetten von YouTube-Livestreams in Ihre WordPress-Site kann das Engagement erhöhen, indem Besuchern ermöglicht wird, mit Ihnen und Ihren Inhalten in Echtzeit zu interagieren.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen YouTube-Livestream in WordPress einbetten.

How to embed a YouTube live stream in WordPress

Warum YouTube-Livestreams in WordPress einbetten?

Mit Live-Streaming können Sie Live-Video- oder Audioinhalte über das Internet übertragen, sodass Benutzer das Video in Echtzeit ansehen können.

YouTube live stream

Das Einbetten eines YouTube-Livestreams in Ihre WordPress-Website ist eine hervorragende Möglichkeit, sich mit Ihrem Publikum zu verbinden und mehr Benutzer zu erreichen.

Es kann auch die Benutzerinteraktion erhöhen, indem es Ihnen ermöglicht, mit Website-Besuchern zu interagieren.

Ein YouTube-Livestream kann auch dazu beitragen, die SEO der Website zu verbessern und mehr Traffic anzuziehen. Untersuchungen haben gezeigt, dass Blogposts mit mindestens einem Video etwa 83 % mehr Besucher erhalten als Inhalte ohne Videos.

Lassen Sie uns sehen, wie Sie einen YouTube-Livestream einfach in WordPress einbetten können.

So betten Sie einen YouTube-Livestream in WordPress ein

Der einfachste Weg, einen YouTube-Livestream einzubetten, ist die Verwendung des YouTube Feed Pro-Plugins von Smash Balloon.

Es ist das beste WordPress YouTube-Feed-Plugin, mit dem Sie YouTube-Videos und Live-Streams auf Ihrer Website einbetten können.

Zuerst müssen Sie das YouTube Feed Pro-Plugin installieren und aktivieren. Weitere Anweisungen finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress-Plugins.

Hinweis : YouTube-Feed hat auch eine kostenlose Version. Die Live-Stream-Funktion wird jedoch nicht unterstützt.

Sobald das Plugin aktiviert wurde, müssen Sie die Seite Youtube Feed » Einstellungen in der Admin-Seitenleiste aufrufen. Hier müssen Sie den Lizenzschlüssel eingeben und auf die Schaltfläche „Aktivieren“ klicken.

Sie können den Lizenzschlüssel von Ihrer Kontoseite auf der Smash Balloon-Website erhalten.

Activate your smash balloon license key

Als nächstes müssen Sie die Seite YouTube-Feeds »Alle Feeds in der WordPress-Admin-Seitenleiste aufrufen.

Klicken Sie von hier aus einfach oben auf die Schaltfläche „Neu hinzufügen“.

Click the Add New button to add the YouTube feed

Dadurch wird die Eingabeaufforderung „Feedtyp auswählen“ geöffnet.

Jetzt müssen Sie die Option „Live Streams“ auswählen und dann auf die Schaltfläche „Weiter“ klicken, um fortzufahren.

Choose live stream as feed type

Im nächsten Schritt müssen Sie YouTube Feed Pro mit Ihrem Youtube-Konto verbinden. Sie werden aufgefordert, Ihren YouTube-API-Schlüssel anzugeben.

Wenn Sie bereits einen API-Schlüssel haben, kopieren Sie ihn einfach und fügen Sie ihn in das Feld „API-Schlüssel eingeben“ ein und klicken Sie auf die Schaltfläche „Hinzufügen“.

Add YouTube API key

Erstellen Sie einen YouTube-API-Schlüssel

Wenn Sie noch keinen API-Schlüssel haben, müssen Sie zur Google Cloud Console gehen und sich mit Ihrem Google-Konto anmelden.

Sobald Sie eingeloggt sind, klicken Sie oben auf die Schaltfläche „Projekt auswählen“.

Click Select Project button

Dadurch wird ein Popup-Fenster geöffnet, in dem alle von Ihnen erstellten Projekte angezeigt werden.

Klicken Sie anschließend einfach oben auf die Schaltfläche „Neues Projekt“.

Click the New Project button

Dadurch gelangen Sie auf die Seite „Neues Projekt“, auf der Sie beginnen können, indem Sie einen Namen für Ihr Projekt eingeben. Dies kann alles sein, was Ihnen hilft, es leicht zu identifizieren.

Als nächstes müssen Sie auch eine „Organisation“ und ihren Standort aus dem Dropdown-Menü auswählen. Sie können „Keine Organisation“ auswählen und auf die Schaltfläche „Erstellen“ klicken, um fortzufahren.

Choose a project name and its organization

Sobald das Projekt erstellt wurde, werden Sie zum Projekt-Dashboard weitergeleitet.

Von hier aus müssen Sie im oberen Menü auf die Schaltfläche „+ APIs und Dienste aktivieren“ klicken.

Click on the + ENABLE APIS AND SERVICES button

Dadurch gelangen Sie zur Seite der API-Bibliothek. Es zeigt die verschiedenen Google-Dienste, für die Sie APIs erstellen und in Ihren Projekten verwenden können.

Suchen Sie nun im Suchfeld nach „YouTube Data API v3“.

Search for the YouTube data API v3 option

Sobald das Ergebnis „YouTube Data API v3“ angezeigt wird, klicke einfach darauf.

Dadurch gelangen Sie auf eine neue Seite, auf der Sie auf die Schaltfläche „Aktivieren“ klicken müssen, um den YouTube-API-Schlüssel zu aktivieren.

Enable the YouTube API

Sie werden nun zur Seite „API/Service-Details“ weitergeleitet.

Klicken Sie von hier aus einfach oben auf die Schaltfläche „Create Credentials“.

Click the Create Credentials button

Als Nächstes werden Sie zu einer neuen Seite weitergeleitet, auf der Sie das Kontrollkästchen neben der Option „Öffentliche Daten“ aktivieren müssen.

Klicken Sie danach auf die Schaltfläche „Weiter“, um Ihre API zu erstellen.

Check the Public data box and click on the Next button

Ihr API-Schlüssel wird nun erstellt und auf der Seite angezeigt.

Kopieren Sie einfach den API-Schlüssel und klicken Sie auf die Schaltfläche „Fertig“.

Copy the YouTube API key

Als nächstes ist es an der Zeit, zum WordPress-Dashboard zurückzukehren.

Fahren Sie fort und fügen Sie den API-Schlüssel in das Feld API-Schlüssel erforderlich ein. Klicken Sie dann auf die Schaltfläche „Hinzufügen“, um fortzufahren.

Add YouTube API key

Fügen Sie den YouTube-Live-Stream zu Ihrer WordPress-Website hinzu

Nachdem Sie Ihren YouTube-API-Schlüssel hinzugefügt haben, werden Sie auf die Seite „Feedtyp auswählen“ weitergeleitet.

Von hier aus müssen Sie erneut auf die Option „Livestream“ klicken, gefolgt von der Schaltfläche „Weiter“.

Dadurch wird die Seite „Kanal-ID für Livestream hinzufügen“ geöffnet.

Visit the Add channel ID for live stream page

Jetzt müssen Sie den YouTube-Kanal besuchen, der Ihre Live-Stream-Videos enthält.

Kopieren Sie von hier aus den Text, der nach „/channel/“ oder „/user/“ in der URL oben steht.

Copy the code after channel or user in the URL

Wechseln Sie als Nächstes zurück zum WordPress-Dashboard und fügen Sie den Code in das Feld „Kanal-ID für Livestream hinzufügen“ ein.

Klicken Sie danach auf die Schaltfläche „Verbinden“, um Ihren YouTube-Kanal mit WordPress zu verbinden.

Sobald der Kanal verbunden ist, müssen Sie auf die Schaltfläche „Weiter“ klicken, um fortzufahren.

Add code and click the connect button

Passen Sie Ihren YouTube-Feed an

Nachdem Ihr YouTube-Livestream-Feed nun erstellt wurde, können Sie ihn anpassen. Der YouTube Feed Pro von Smash Balloon bietet viele verschiedene Anzeigeoptionen.

Zuerst müssen Sie auf der Seite „Mit einer Vorlage beginnen“ eine Vorlage auswählen. Sie können zwischen Standard-, Karussell-, Karten-, Listen-, Galerie- und Rasterlayouts wählen.

Wenn Sie Ihre Wahl getroffen haben, klicken Sie einfach auf die Schaltfläche „Weiter“.

Choose a template for your Live YouTube feed

Nachdem Sie eine Vorlage ausgewählt haben, öffnet sich ein Bearbeitungsbildschirm, der rechts eine Vorschau Ihres YouTube-Feeds und in der linken Menüspalte Anpassungseinstellungen anzeigt.

Hier können Sie beginnen, indem Sie das Feld „Feed-Layout“ erweitern.

YouTube Feed editor

Auf diesem Bildschirm können Sie zwischen den Layouts wechseln.

Je nach gewähltem Layout können Sie möglicherweise auch zusätzliche Einstellungen konfigurieren.

Customize the YouTube feed layout

Als nächstes müssen Sie auf das Bedienfeld „Farbschema“ klicken.

Standardmäßig verwendet YouTube Feed Pro dasselbe Farbschema wie Ihr WordPress-Design. Sie können jedoch auch ein 'helles' oder 'dunkles' Farbschema für den Video-Feed verwenden.

Sie können auch Ihr eigenes Farbschema entwerfen, indem Sie auf die Option "Benutzerdefiniert" klicken und dann die Steuerelemente verwenden, um die Hintergrund-, Text- und Linkfarben zu ändern.

Customize feed color scheme

Um Ihrem YouTube-Feed eine Kopfzeile hinzuzufügen, müssen Sie das Feld „Kopfzeile“ aufrufen. Schalten Sie von hier aus einfach den Schalter „Enable“ um, um den Header zu aktivieren.

Sie können auch die Steuerelemente verwenden, um zwischen Standard- und Textkopfzeilenstilen zu wechseln. Wenn Sie die Option „Text“ wählen, können Sie die Textgröße und -farbe ändern.

Customize YouTube feed header

Sie können auch das Erscheinungsbild des Videoplayers anpassen, indem Sie zum Bereich „Videos“ gehen.

Hier sehen Sie eine Liste mit Optionen.

Videos panel option

Um das Videolayout und einzelne Eigenschaften anzupassen, müssen Sie das Einstellungsfeld „Videostil“ aufrufen.

Hier können Sie das Videolayout, die Hintergrundfarbe und den Rahmen auswählen.

Customize video style

Öffnen Sie danach das Bedienfeld „Einzelne Elemente bearbeiten“. Aktivieren Sie hier einfach die Kontrollkästchen neben den Elementen, die Sie zusammen mit den YouTube-Livestream-Videos anzeigen möchten.

Sie können das Wiedergabesymbol, den Videotitel, den Livestream-Countdown, Beschreibungen und mehr ein- oder ausblenden.

Edit the individual elements you want to display along with the video

Als nächstes müssen Sie zur Einstellung „Hover State“ gehen. Hier können Sie die einzelnen Elemente auswählen, die angezeigt werden, wenn der Benutzer mit der Maus über das YouTube-Video fährt.

Sie können viele Elemente auswählen, darunter Videotitel, Beschreibung, Datum, Aufrufe und mehr.

Customize hover state

Danach müssen Sie das Panel „Video Player Experience“ aufrufen.

Von hier aus können Sie das Seitenverhältnis des Videoplayers ändern. Sie können auch wählen, ob das Video automatisch abgespielt wird oder warten, bis der Besucher auf die Wiedergabeschaltfläche klickt.

Customize video player experience

Wechseln Sie nach dem Anpassen der einzelnen Videoelemente zum Panel „Load More Button“.

Hier können Sie unter der Einstellung „Mehr laden“ den Schalter auf „Aktivieren“ stellen. Dadurch werden nach dem Livestream weitere Videovorschläge angezeigt.

Sie können auch die Hintergrundfarbe, den Hover-Status und den Text aus den Einstellungen im linken Bereich auswählen.

Customize the Load More button

Wechseln Sie danach zum Bereich „Abonnieren-Schaltfläche“ und schalten Sie den Schalter auf „Aktivieren“, wenn Sie die YouTube-Abonnieren-Schaltfläche aktivieren möchten.

Sie können auch die Farbe, den Text und den Hover-Status der Schaltfläche in den Einstellungen ändern.

Customize Subscribe button

Nachdem Sie den YouTube-Live-Feed angepasst haben, können Sie in einer Vorschau anzeigen, wie er auf Desktop-Computern, Tablets und Smartphones aussehen wird. Klicken Sie einfach auf die verschiedenen Schaltflächen in der oberen rechten Ecke, um eine Vorschau des Feeds auf verschiedenen Geräten anzuzeigen.

Vergessen Sie abschließend nicht, oben auf die Schaltfläche „Speichern“ zu klicken, um Ihre Änderungen zu speichern.

Preview and save feed

Betten Sie den YouTube-Livestream auf einer WordPress-Seite ein

Der nächste Schritt besteht darin, Ihren YouTube-Live-Feed auf einer WordPress-Seite einzubetten. Dazu müssen Sie zunächst oben auf die Schaltfläche „Einbetten“ klicken.

Dadurch wird die Eingabeaufforderung „Feed einbetten“ geöffnet. Klicken Sie hier auf die Schaltfläche „Zu einer Seite hinzufügen“, um fortzufahren.

Click Add to a page button to embed YouTube feed

Das Popup zeigt nun eine Liste aller WordPress-Seiten auf Ihrer Website an.

Wählen Sie einfach die Seite aus, auf der Sie den YouTube-Livestream einbetten möchten, und klicken Sie auf die Schaltfläche „Hinzufügen“.

Choose a page where you want to embed the feed and click on the Add button

Die von Ihnen ausgewählte Seite wird nun im Blockeditor geöffnet.

Von hier aus müssen Sie auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke klicken und nach dem Block „Feeds für YouTube“ suchen.

Wenn Sie ihn gefunden haben, fügen Sie den Block zu Ihrer Seite hinzu, indem Sie darauf klicken.

Embed YouTube Feed on a page

Vergessen Sie nicht, auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“ zu klicken, um Ihre Änderungen zu speichern oder sie live zu schalten.

So sieht der YouTube-Live-Feed auf unserer Demo-Website aus.

YouTube Feed Page preview

Fügen Sie einen YouTube-Live-Feed als Widget hinzu

Sie können der WordPress-Seitenleiste auch einen YouTube-Live-Feed als Widget hinzufügen.

Zuerst müssen Sie die Seite Aussehen »Widgets in der Admin-Seitenleiste aufrufen.

Klicken Sie von hier aus auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke des Bildschirms und suchen Sie den Block „Feeds für YouTube“.

Klicken Sie anschließend auf den Block, um ihn dem Widget-Bereich hinzuzufügen.

Add YouTube Feed as a widget

Vergessen Sie nicht, auf die Schaltfläche „Aktualisieren“ zu klicken, um Ihre Änderungen zu speichern.

So sieht der YouTube-Live-Feed in der Seitenleiste auf unserer Demo-Website aus.

Widget Preview of YouTube feed

Füge einen YouTube Live Stream im Full Site Editor hinzu

Wenn Sie ein blockbasiertes Design verwenden, ist diese Methode für Sie geeignet.

Gehen Sie zunächst in der Admin-Seitenleiste zur Seite Aussehen » Editor , um den Site-Editor zu starten.

Klicken Sie von hier aus oben auf die Schaltfläche „Block hinzufügen (+)“ und suchen Sie nach dem Block „Feeds für YouTube“.

Als Nächstes können Sie den Block per Drag & Drop an die Stelle ziehen, an der Sie den YouTube-Feed auf Ihrer Seite anzeigen möchten.

Add the YouTube feed in FSE

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken, um die Änderungen zu übernehmen.

Hier ist eine Vorschau der Live-Streams auf unserer Demo-Website.

FSE preview of YouTube live feed

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie YouTube-Livestreams in WordPress einbetten. Vielleicht möchten Sie auch unseren ultimativen WordPress-SEO-Leitfaden lesen oder sich unsere Top-Auswahl für die besten Social-Media-Plugins ansehen, um Ihre Website zu erweitern.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.