Möchten Sie einen iFrame-Rahmen um Ihre Videoeinbettung hinzufügen? Kürzlich hat uns ein Benutzer nach einer Möglichkeit gefragt, einen Rahmen um seine Videos in WordPress hinzuzufü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 Videoeinbettung sowie einen Rahmen 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
Als erstes müssen Sie einen Beitrag oder eine Seite öffnen, die Ihren iFrame-Video-Einbettungscode 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 sowie die Farbe, und 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. Dies geschieht durch die Verwendung von oEmbed.
Hinzufügen von Rahmen um oEmbed-Videos in WordPress
WordPress wird mit integrierter oEmbed-Unterstützung geliefert. Grundsätzlich erlaubt WordPress Ihnen, den Link des Videos einzufügen, und es wird automatisch der Einbettungscode für sie abgerufen. Dies funktioniert jetzt nur für oEmbed-fähige Websites wie YouTube, Vimeo, DailyMotion, Hulu usw. (Siehe: So fügen Sie Videos mit oEmbed einfach in WordPress hinzu)
Nachdem Sie nun wissen, wie Sie mit oEmbed ein Video hinzufügen, können Sie in WordPress einen Rahmen um oEmbed-Videos hinzufügen.
Wenn Sie ein Video mit oEmbed hinzufügen, wickeln Sie die URL einfach in das span-Tag mit Inline-Stilparametern ein, wie folgt:
<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>
Wenn Sie um alle Video-Iframes einen gleichen Rahmen hinzufügen möchten, ist es am besten, dem Stylesheet Ihres Themes eine CSS-Klasse hinzuzufügen.
.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 dieselbe CSS-Klasse auch im span-Tag um Ihre oEmbed-Video-URLs herum verwenden, wie folgt:
<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>
Der Vorteil der Verwendung einer einzelnen CSS-Klasse besteht darin, dass Sie, wenn Sie Themen später ändern, die Farben einfach mit einem Klick ändern können, anstatt jedes Video einzeln zu bearbeiten.
Wir hoffen, dieser Artikel hat Ihnen geholfen, einen iframe-Rahmen um eine Videoeinbettung in WordPress hinzuzufügen. Vielleicht möchten Sie auch diese 9 nützlichen YouTube-Tipps sehen, um Ihre WordPress-Site mit Videos aufzupeppen.