Springe zum Hauptinhalt

Wie ein YouTube-Video in einem Popup auf Wordpress zu öffnen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 701.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Möchten Sie herausfinden, wie Sie ein Youtube-Video in einem Popup auf WordPress öffnen können?

La Leuchtkasten oder modales Fenster (Popup) ist eine sehr häufige Funktion im Netz. Es wird jedoch im Allgemeinen verwendet, um Bilder, E-Mail-Erfassungsformulare, Werbeaktionen oder sogar Registrierungsformulare anzuzeigen. 

Aber wussten Sie, dass es auch möglich ist, Videos anzuzeigen? WordPress ? Nicht? 

Keine Sorge, in diesem Tutorial zeige ich Ihnen, wie Sie ein Video anzeigen (Youtube - Vimeo - etc) in ein Leuchtkasten.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

Die Gründe, warum Sie a verwenden sollten Leuchtkasten, um Ihre Videos anzuzeigen 

Die Leuchtkasten Es handelt sich jedoch um modale Fenster. Sie wissen jedoch nicht, dass nicht alle darin angezeigten Bilder während des Fensters geladen werden « Laden«  Seite. 

Le Navigateur berechnen die Bilder wenn der Leuchtkasten geöffnet wird, ist dies auch bei Videos der Fall. Kurz gesagt, es ist eine Funktion, die Dadurch können Ihre Seiten schneller geöffnet werden. Sie können damit auch die Größe reduzieren (longueur) Ihrer Seiteweil ein Teil des Inhalts dieser Seite in diesem modalen Fenster verfügbar sein wird.

Waffenstillstand, lasst uns zur Sache kommen.

Wie installieren und konfigurieren Plugin WP Video Leuchtkasten

WP Video Lightbox ist ein Plugin verfügbar bei WordPress.org. Das heißt, Sie können es direkt von Ihrem WordPress-Dashboard aus installieren oder Laden Sie es herunter als ZIP-Datei.

Für weitere Informationen, Lesen Sie unsere Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach dem Aktivieren der Plugin, gehe von diesem Ort zu seiner Einstellungsseite " Einstellungen >> Video Leuchtkasten ".

Wir werden direkt zum " schönes Foto ".

In Wirklichkeit ist dies Plugin benutze einen anderen Plugin, der hauptsächlich zum Anzeigen einer Fotogalerie gedacht ist. Sie können jedoch einige der Informationen ändern, die auf Videos angewendet werden.

Dazu erkläre ich einige Optionen (Erforderlich)Damit ist es, wie Sie wollen.

Schon die Buchhandlung schönes Foto muss aktiv sein (check « Ermöglichen schönes Foto »)Um Benutzer darüber zu informieren, dass sie sich auf derselben Seite befinden, können Sie das Fenster transparent machen (definieren ein Wert von 0 bis 1. Komma-Werte werden akzeptiert).

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Entdecken Sie Die Eigenschaften eines effektiven Popups für WordPress 

Alle Ihre Leuchtkästen können einen Titel haben, der angezeigt werden kann (Anzahl Artikel Titel). Manchmal müssen Sie bei großen modalen Fenstern die Größenänderung zulassen (erlauben Größe). Und für längere Videos können Benutzer sie vergrößern (erlauben Erweitern), Bessere Optik.

Für die Breite und Höhe der Leuchtkastenkönnen Sie die Felder bearbeiten " Standard Breite "Und" Standard Höhe ". 

So wählen Sie das Thema der Leuchtkasten, ändern Sie das Dropdown-Menü Thema ". Es ist auch möglich, die automatische Wiedergabe zu aktivieren (kreuze das Kästchen an " Autoplay ").

Öffne ein Youtube-Video in einem Popup - define-les-regalges

So zeigen Sie ein Leuchtkasten in einem Artikel

Le Plugin schlägt eine Liste von Kurzwahlnummern Damit können Sie anzeigen Leuchtkasten in Artikeln. Ich habe vergessen Ihnen zu sagen, dass Sie auch die verfügbaren Videos anzeigen können Vimeo.

So zeigen Sie ein Video an Youtube ou Vimeodu musst das benutzen Kurzwahlnummern folgende:

[video_lightbox_youtube] (für YouTube)
[video_lightbox_vimeo5] (Für Vimeo)

Jeder von diesen Kurzwahlnummern akzeptiert Parameter, mit denen Sie:

  • Definieren Sie die Kennung (video_id) eines Videos, normalerweise in diesem Format " YzqKMmQ_3Sg ". Beispiel [video_lightbox_youtub video_id = "YzqKMmQ_3Sg"]
  • Stellen Sie die Höhe des Videos ein (Höhe)
  • Stellen Sie die Breite des Videos ein (Breite)
  • Fügen Sie eine Beschreibung (Beschreibung)
  • Fügen Sie einen HTML-Anker hinzu (Anker) oder Text des Links, der das Fenster öffnet
  • Fügen Sie ein Miniaturbild hinzu (auto_thumb)

Wenn Sie einen HTML-Anker setzen, wird die Miniaturansicht ignoriert. Ansonsten auto_thumb nimmt den Wert " 1 ".

Gehen Sie weiter, indem Sie auch entdecken Wie verwenden und verwalten Wordpress Shortcodes

Demo einer Nutzung

Mit den Informationen, die ich Ihnen gerade zur Verfügung gestellt habe, können Sie ein Video mit einem ähnlichen Code anzeigen:

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0width = "640Höhe = "480anchor = "Eins einfaches Video " description = "Von Dr. WP "]

Für ein ähnliches Ergebnis

Präsentation-for-Ergebnisse

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Sie können eine Miniaturansicht wie oben gezeigt mit einem ähnlichen Code anzeigen.

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0width = "640Höhe = "480auto_thumb = "1description = "Von Dr. WP "]

Für ein Ergebnis wie dieses

Miniatur-Düne-Video

Vor dem verlassen

Es ist zu beachten, dass einige Parameter in der Kurzwahlnummern überschreibt die in den Einstellungen definierten Werte.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. FileBird

Haben Sie jemals Probleme gehabt, Tausende von Bild-, Video- oder Dokumentdateien zu verwalten, die Sie auf Ihr WordPress-FTP hochgeladen haben? Ja oder Nein, was auch immer, das Wichtigste ist zu wissen, dass das WordPress FileBird-Plugin Ihnen hilft, Ihre Mediendateien mühelos zu verwalten und mehr Leistung in Ihre Bibliothek zu bringen.FileBird

Dank der nahtlosen Benutzeroberfläche und des Kontextmenüs können Benutzer Dateien in Ordner ziehen und ablegen oder verfügen über die erforderlichen Rechte, um Ordner auf die gleiche Weise wie auf Ihrem Computer schnell zu erstellen, umzubenennen oder zu löschen. Mit diesem Plugin werden Ihre Mediendateien systematisch organisiert und Sie können ganz einfach ein Bild auswählen, das in eine Seite eingefügt oder veröffentlicht werden soll.

Entdecken Sie auch unsere 6 WordPress-Plugins, um Ihren Artikeln neues Leben einzuhauchen

Darüber hinaus ist dieses Plugin vollständig kompatibel mit den gängigsten Plugins, insbesondere mit WooCommerce, und unterstützt auch eine große Anzahl von Sprachen. Wenn Sie also die Verwaltung Ihrer Medienbibliothek verbessern möchten, könnte das FileBird WordPress-Plugin Ihre Geheimwaffe sein.

DownloadDemo Web-Hosting

2. Social Share & Locker Pro

Das Social Share & Locker Pro-Plugin wurde entwickelt, um Ihre Website in sozialen Netzwerken besser sichtbar zu machen. Mit nur wenigen Klicks können Sie entweder die Position Ihrer sozialen Symbole festlegen oder Ihre Inhalte sperren, indem Sie die Freigabe in einem der von Ihnen angebotenen sozialen Netzwerke verlangen.

Social Share Locker Pro WordPress-Plugin

Sie haben 10 Vorlagen, die die häufigsten Wünsche abdecken sollen. Alle Modelle sind perfekt und funktionieren wunderbar. Mit Social Share & Locker Pro können Sie außerdem den vollständigen Namen der sozialen Netzwerke oder nur das Symbol anzeigen. Dies hängt von Ihrem Design, dem verfügbaren Platz oder Ihrem Geschmack ab.

Download | Demo | Web-Hosting

3. Kontaktformular 7 Tooltips

Diese WordPress-Erweiterung des Contact Form 7-Plugins bietet eine Funktion zum einfachen Hinzufügen von Tooltips zu Ihrem Contact Form 7-Plugin. Die Tooltips werden angezeigt, wenn Sie den Mauszeiger über das Zielelement bewegen. Auf Mobilgeräten geben Tooltips an, wann das Zielelement aktiviert ist.Kontaktformular 7 Tooltips

Die Hauptmerkmale sind: Benutzerfreundlichkeit, Unterstützung für alle Versionen von Contact Form 7, Anpassung der Hintergrundfarbe des Tooltips, Unterstützung für HTML-Code, vollständiges Layout reaktionsschnell und mehr.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Download | Demo | Web-Hosting

Andere empfohlene Ressourcen

Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.

Fazit

Es! Das wars für dieses Tutorial, hoffe es hilft dir, Youtube- oder Vimeo-Videos in einem anzuzeigen Leuchtkasten auf Ihrer WordPress-Website. Zögere nicht zu Teilen Sie den Tipp mit Ihren Freunden in Ihren sozialen Netzwerken.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Aber erzählen Sie uns in der Zwischenzeit von Ihrem commentaires und Vorschläge im entsprechenden Abschnitt.

...

Dieser Artikel enthält Kommentare 7

  1. Guten Tag,
    Ich suche nach einer Möglichkeit, ein Video-Popup nach einem Klick auf eine Schaltfläche anzuzeigen. Ist es möglich, dies mit WP Video Lightbox zu tun?

    danke,
    Mit freundlichen Grüßen,

  2. Guten Tag,
    Vielen Dank für dieses gut aufgebaute Tutorial. Ich wollte wissen, ob es möglich ist, Videos von anderen Plattformen als You Tube und Vimeo (Openload-Beispiel) hinzuzufügen oder ob es ein Limit gibt.

    Ihre

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
7 Aktien
Aktie5
tweet
Registrieren2