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

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

Video-Anleitung

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

Hinzufügen eines Rahmens um iframe-Videos in WordPress

Als Erstes müssen Sie einen Beitrag oder eine Seite öffnen, die den Code für die Einbettung Ihres iframe-Videos enthält. Ein typischer iframe-Einbettungscode sollte etwa so aussehen:

<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

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

<iframe style="border: 3px solid #EEE;" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

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

Während das Hinzufügen eines iframe-Rahmens funktioniert, gibt es eine bessere Möglichkeit, einen Rahmen um Videos in WordPress hinzuzufügen. Und zwar mithilfe von oEmbed.

Hinzufügen eines Rahmens um oEmbed-Videos in WordPress

WordPress verfügt über eine integrierte oEmbed-Unterstützung. Grundsätzlich können Sie in WordPress den Link des Videos einfügen, und es wird automatisch den Einbettungscode für sie erhalten. Dies funktioniert jedoch nur für oEmbed-fähige Websites wie YouTube, Vimeo, DailyMotion, Hulu usw. (Siehe: Wie man mit oEmbed ganz einfach Videos in WordPress einfügt)

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

Wenn Sie ein Video mit oEmbed hinzufügen, verpacken Sie einfach die URL in ein span-Tag mit Inline-Stil-Parametern, so wie hier:

<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

Wenn Sie einen einheitlichen Rahmen um alle Video-iframes hinzufügen möchten, fügen Sie am besten eine CSS-Klasse in das Stylesheet Ihres Themes ein.

.frame-border { 
border:3px solid #EEE; 
}

Jetzt können Sie die CSS-Klasse in Ihrem Iframe-Einbettungscode wie folgt verwenden:

<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

Sie können die gleiche CSS-Klasse auch im span-Tag um Ihre oEmbed-Video-URLs herum verwenden, etwa so:

<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

Der Vorteil der Verwendung einer einzigen CSS-Klasse ist, dass Sie bei einem späteren Themenwechsel die Farben mit einem Klick ändern können, anstatt jedes Video einzeln zu bearbeiten.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, einen Iframe-Rahmen um eine Videoeinbettung in WordPress hinzuzufügen. Vielleicht interessieren Sie sich auch für diese 9 nützlichen YouTube-Tipps, um Ihre WordPress-Website mit Videos aufzupeppen.

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