Comment ajouter une bordure iframe autour d'une vidéo intégrée
Souhaitez-vous ajouter une bordure 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 allons vous montrer comment ajouter une bordure iframe autour d'une vidéo intégrée ainsi que comment ajouter une bordure autour de 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 d'une bordure autour des vidéos iframe dans WordPress
La première chose que vous devez faire est d’ouvrir une publication ou une page contenant le code d’intégration de votre vidéo iframe. Un code d'intégration iframe typique devrait ressembler à ceci :
Vous pouvez ajouter une bordure autour en ajoutant un style en ligne au code comme ceci :
Changez simplement la largeur de la bordure ainsi que la couleur, et le tour est joué.
Bien que l’ajout d’une bordure iframe fonctionne, il existe en réalité un meilleur moyen d’ajouter une bordure autour des vidéos dans WordPress. C'est en utilisant oEmbed.
Ajout d'une bordure autour des vidéos oEmbed dans WordPress
WordPress est livré avec le support oEmbed intégré. 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 oEmbed tels que YouTube, Vimeo, DailyMotion, Hulu, etc. (Voir : comment ajouter facilement des vidéos dans WordPress à l'aide d'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 d'oEmbed, enveloppez simplement l'URL dans une balise span avec des paramètres de style en ligne, comme ceci :
http://www.youtube.com/watch?v=qzOOy1tWBCg
Si vous souhaitez ajouter une même bordure autour de toutes 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 :
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 ultérieurement, vous pouvez facilement modifier les couleurs en un seul clic plutôt que de revenir en arrière et d'é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 dans WordPress. Vous voudrez peut-être également consulter ces 9 conseils YouTube utiles pour pimenter votre site WordPress avec des vidéos.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.