Comment ajouter une bordure iframe autour d’un Contenu embarqué vidéo

Voulez-vous ajouter une bordure iframe autour de votre Contenu embarqué vidéo ? Récemment, un compte nous a demandé comment ajouter une bordure autour de ses vidéos dans WordPress. Puisque vous pouvez utiliser à la fois iframe et Contenu embarqué pour ajouter des vidéos dans WordPress, nous allons vous afficher comment ajouter une bordure iframe autour d’une vidéo embarquée ainsi que comment ajouter une bordure autour des vidéos oEmbed dans WordPress.

Tutoriel vidéo

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

Ajout d’une bordure autour des vidéos iframe dans WordPress

La première chose à 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 :

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

Vous pouvez 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>.

Il suffit de modifier la largeur de la bordure ainsi que la couleur, et le tour est joué.

Bien que l’ajout d’une bordure d’iframe fonctionne, il existe une meilleure façon d’ajouter une bordure autour des vidéos dans WordPress. Il s’agit d’utiliser oEmbed.

Ajout d’un point terminaison autour des vidéos oEmbed dans WordPress

WordPress dispose d’un support oEmbed intégré. Contenu embarqué WordPress vous permet de coller le lien de la vidéo, et il obtiendra automatiquement le code d’intégration pour eux. Cela fonctionne uniquement pour les sites compatibles avec oEmbed tels que YouTube, Vimeo, DailyMotion, Hulu, etc. (Voir : comment ajouter facilement des vidéos dans WordPress en utilisant oEmbed).

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

Lors de l’ajout d’une vidéo avec oEmbed, il suffit d’insérer l’URL dans une balise span avec des paramètres de style inline, 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 toutes les vidéos iframes, 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 de l’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 le point terminaison oEmbed autour des URLs de vos vidéos, 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 ultérieurement, vous pouvez facilement modifier les couleurs en un seul 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’un contenu vidéo embarqué dans WordPress. Vous pouvez également consulter ces 9 astuces YouTube utiles pour pimenter votre site WordPress avec des vidéos.

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