Comment ajouter une bordure iframe autour d'une vidéo intégrée

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

Didacticiel vidéo

Si vous n'aimez pas la vidéo ou si vous avez besoin de plus d'instructions, continuez à lire..

Ajout de vidéos entourant l'iframe dans WordPress

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

Vous pouvez ajouter une bordure autour en ajoutant un style inline au code comme ceci:

Il suffit de changer la largeur de la bordure ainsi que la couleur, et vous avez terminé.

Bien que l’ajout d’une bordure iframe fonctionne, il existe un meilleur moyen d’ajouter une bordure autour des vidéos dans WordPress. C'est en utilisant oEmbed.

Ajout de vidéos Border Autour de oEmbed dans WordPress

WordPress est livré avec le support intégré oEmbed. Fondamentalement, WordPress vous permet de coller le lien de la vidéo et il obtiendra automatiquement le code d'intégration correspondant. Désormais, cela ne fonctionne que pour les sites compatibles avec oEmbed tels que YouTube, Vimeo, DailyMotion, Hulu, etc. (Voir: comment ajouter facilement des vidéos dans WordPress à l'aide de oEmbed)

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

Lorsque vous ajoutez une vidéo à l'aide de oEmbed, enveloppez simplement l'URL dans une balise span avec des paramètres de style intégrés, comme ceci:

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

Si vous souhaitez ajouter une même bordure autour de tous les iframes vidéo, il est 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:

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

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

L'avantage d'utiliser une seule classe CSS est que si vous changez de thème plus tard, vous pouvez facilement changer les couleurs en un clic, et revenir en arrière et éditer 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 à WordPress. Vous voudrez peut-être aussi voir ces 9 conseils utiles sur YouTube pour pimenter votre site WordPress avec des vidéos.

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