So fügen Sie einen iframe-Rahmen um ein Video-Embed hinzu

Möchten Sie einen iframe-Rahmen um Ihre Video-Einbettung hinzufügen? Kürzlich hat uns ein Benutzer nach einer Möglichkeit gefragt, in WordPress einen Rand um seine Videos einzufügen. Da Sie sowohl iframe als auch oEmbed verwenden können, um Videos in WordPress hinzuzufügen, zeigen wir Ihnen, wie Sie einen iframe-Rahmen um eine Video-Einbettung hinzufügen und wie Sie einen Rand um oEmbed-Videos in WordPress hinzufügen.

Videoanleitung

Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie weiter.

Hinzufügen von Rahmen um iframe-Videos in WordPress

Zuerst müssen Sie einen Beitrag oder eine Seite öffnen, die den Code zum Einbetten des Iframe-Videos enthält. Ein typischer iframe-Einbettungscode sollte in etwa wie folgt aussehen:

Sie können eine Umrandung hinzufügen, indem Sie dem Code einen Inline-Stil wie folgt hinzufügen:

Ändern Sie einfach die Breite des Rahmens sowie die Farbe, und Sie sind fertig.

Während das Hinzufügen eines iframe-Rahmens funktioniert, gibt es tatsächlich eine bessere Möglichkeit, einen Rahmen um Videos in WordPress hinzuzufügen. Das ist mit oEmbed.

Hinzufügen von Border Around oEmbed-Videos in WordPress

WordPress wird mit integrierter oEmbed-Unterstützung geliefert. Grundsätzlich können Sie in WordPress den Link des Videos einfügen und automatisch den Einbettungscode dafür erhalten. Dies funktioniert jetzt nur für oEmbed-fähige Sites wie YouTube, Vimeo, DailyMotion, Hulu usw. (Siehe: Wie man mit oEmbed problemlos Videos in WordPress hinzufügt)

Nun, da Sie wissen, wie Sie ein Video mit oEmbed hinzufügen, können Sie in WordPress einen Rahmen um oEmbed-Videos hinzufügen.

Wenn Sie ein Video mit oEmbed hinzufügen, umschließen Sie die URL im span-Tag einfach mit Inline-Stilparametern wie folgt:

http://www.youtube.com/watch?v=qzOOy1tWBCg

Wenn Sie allen Video-Iframes einen gleichen Rahmen hinzufügen möchten, empfiehlt es sich, dem Stylesheet Ihres Themas eine CSS-Klasse hinzuzufügen.

 .Rahmenrand border: 3px solid #EEE;  

Jetzt können Sie die CSS-Klasse in Ihrem iframe-Einbettungscode folgendermaßen verwenden:

Sie können dieselbe CSS-Klasse auch im span-Tag um Ihre oEmbed-Video-URLs verwenden, z.

http://www.youtube.com/watch?v=qzOOy1tWBCg

Der Vorteil der Verwendung einer einzelnen CSS-Klasse besteht darin, dass Sie die Farben mit einem Klick ändern können, wenn Sie die Themen später ändern, und Sie müssen jedes Video einzeln bearbeiten.

Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, ein in WordPress eingebettetes Video mit einem iframe-Rahmen zu versehen. Vielleicht möchten Sie auch diese 9 nützlichen YouTube-Tipps anzeigen, um Ihre WordPress-Site mit Videos aufzuwerten.

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