Comment ajouter une bordure iframe autour d'un embed vidéo

Voulez-vous ajouter une bordure d'iframe autour de votre vidéo intégrée ? Récemment, un utilisateur nous a demandé un moyen d'ajouter une bordure autour de ses vidéos dans WordPress. Puisque vous pouvez utiliser à la fois iframe et oEmbed pour ajouter des vidéos dans WordPress, nous vous montrerons comment ajouter une bordure d'iframe autour d'une vidéo intégrée ainsi que comment ajouter une bordure autour des vidéos oEmbed dans WordPress.

Tutoriel vidéo

Si la vidéo ne vous plaît pas ou si vous avez besoin d'instructions supplémentaires, continuez à lire.

Ajouter une bordure autour des vidéos iframe dans WordPress

La première chose à faire est d'ouvrir un article ou une page contenant votre code d'intégration de vidéo iframe. Un code d'intégration iframe typique devrait ressembler à ceci :

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

Vous pouvez y ajouter une bordure en ajoutant un style en ligne au code comme ceci :

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

Changez simplement la largeur de la bordure ainsi que la couleur, et c'est fait.

Bien que l'ajout d'une bordure d'iframe fonctionne, il existe en fait une meilleure façon d'ajouter une bordure autour des vidéos dans WordPress. C'est en utilisant oEmbed.

Ajouter une bordure autour des vidéos oEmbed dans WordPress

WordPress est livré avec la prise en charge intégrée d'oEmbed. Fondamentalement, WordPress vous permet de coller le lien de la vidéo, et il obtiendra automatiquement le code d'intégration pour eux. Cela ne fonctionne que pour les sites compatibles oEmbed tels que YouTube, Vimeo, DailyMotion, Hulu, etc. (Voir : comment intégrer facilement des vidéos dans les articles de blog WordPress à l'aide d'oEmbed)

Maintenant que vous savez comment ajouter une vidéo avec oEmbed, voici comment vous pouvez ajouter une bordure autour des vidéos oEmbed dans WordPress.

Lors de l'ajout d'une vidéo à l'aide d'oEmbed, enveloppez simplement l'URL dans une balise span avec des paramètres de style en ligne, comme ceci :

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

Si vous souhaitez ajouter une bordure identique autour de tous les iframes vidéo, il serait préférable d'ajouter une classe CSS à la feuille de style de votre thème.

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

Vous pouvez maintenant utiliser la classe CSS dans votre code d'intégration iframe comme ceci :

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

Vous pouvez également utiliser la même classe CSS dans la balise span autour de vos URL vidéo oEmbed, comme ceci :

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

L'avantage d'utiliser une seule classe CSS est que si vous changez de thème plus tard, vous pouvez facilement modifier les couleurs en un clic plutôt que de revenir en arrière et de modifier chaque vidéo individuellement.

Nous espérons que cet article vous a aidé à ajouter une bordure iframe autour d'une vidéo intégrée dans WordPress. Vous voudrez peut-être aussi consulter ces 9 astuces YouTube utiles pour pimenter votre site WordPress avec des vidéos.

Si vous avez aimé cet article, alors abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.