So fügen Sie einen iFrame-Rahmen um eine Video-Einbettung hinzu

Möchten Sie einen iframe-Rahmen um Ihre Video-Einbettung 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 zum Hinzufügen von Videos in WordPress verwenden können, zeigen wir Ihnen, wie Sie einen iframe-Rahmen um eine Video-Einbettung sowie einen Rahmen um oEmbed-Videos in WordPress hinzufügen.

Video-Tutorial

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

Rahmen um iframe-Videos in WordPress hinzufügen

Zuerst müssen Sie einen Beitrag oder eine Seite öffnen, die Ihren iframe-Video-Einbettungscode enthält. Ein typischer iframe-Einbettungscode sollte ungefähr so aussehen:

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

Sie können einen Rahmen darum hinzufügen, indem Sie Inline-Styles zum Code hinzufügen, wie hier:

<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 Sie sind fertig.

Während das Hinzufügen eines iFrame-Rahmens funktioniert, gibt es tatsächlich einen besseren Weg, einen Rahmen um Videos in WordPress hinzuzufügen. Das geschieht durch die Verwendung von oEmbed.

Rahmen um oEmbed-Videos in WordPress hinzufügen

WordPress verfügt über eine integrierte oEmbed-Unterstützung. Grundsätzlich ermöglicht WordPress das Einfügen des Videolinks, und es wird automatisch der Einbettungscode dafür abgerufen. Dies funktioniert nur für oEmbed-fähige Websites wie YouTube, Vimeo, DailyMotion, Hulu usw. (Siehe: wie man Videos einfach in WordPress mit oEmbed einbettet)

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

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

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

Wenn Sie denselben Rahmen um alle Video-Iframes hinzufügen möchten, fügen Sie am besten eine CSS-Klasse zum Stylesheet Ihres Themes hinzu.

.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 auch dieselbe CSS-Klasse im span-Tag um Ihre oEmbed-Video-URLs verwenden, wie hier:

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

Der Vorteil der Verwendung einer einzigen CSS-Klasse besteht darin, dass Sie bei einem späteren Theme-Wechsel die Farben mit einem Klick ändern können, anstatt jedes Video einzeln bearbeiten zu müssen.

Wir hoffen, dieser Artikel hat Ihnen geholfen, einen iFrame-Rahmen um eine Video-Einbettung in WordPress hinzuzufügen. Möglicherweise möchten Sie auch diese 9 nützlichen YouTube-Tipps sehen, um Ihre WordPress-Website mit Videos aufzupeppen.

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