Presentation-video-responsive

Comment Mettre Une Vidéo Youtube De Façon Responsive Sur WordPress

Bonjour les amis. Dans cet article nous allons voir comment mettre une vidéo Youtube sur WordPress de façon responsive .

Tout d’abord que signifie le mot « responsive » ?

Un objet HTML, qui peut être par exemple une image, une vidéo, ou une div, est qualifié de « responsive » lorsque sa largeur et sa hauteur changent selon les dimensions de l’objet parent où il est inséré. Ainsi l’object responsive occupe tout et juste l’espace de l’objet parent. Cela permet d’avoir un meilleur rendu sans débordement, ni espace vide.

On parle aussi de thème ou de design « responsive » quand ces derniers s’adaptent aux différentes dimensions d’écrans d’ordinateurs, de tablettes ou de smartphones.

Revenons à notre coeur de sujet, et découvrons pas à pas comment mettre une vidéo sur WordPress de façon responsive dans un article.

Etape 1: Récupérer Le Code A Intégrer Dans Notre Article

Comme indiqué dans l’image ci-dessous pour cela, il nous suffit d’aller à la page de visualisation de la vidéo en question dans Youtube et de cliquer sur « Intégrer » pour copier le code fourni.

Etape 2: Coller Le Code Dans Notre Article WordPress

La deuxième étape consiste à ce que nous allions coller le code récupéré de Youtube dans l’éditeur de texte au niveau de WordPress à l’endroit où nous souhaitons afficher notre vidéo. Ci-dessous une image qui illustre cette manipulation :

comment mettre une vidéo sur WordPress
Comment mettre une vidéo sur WordPress

Si nous sauvegardions directement l’article à cette étape et nous pré-visualisions cet article. Nous remarquerions alors comme vous pouvez le voir au niveau de l’image ci-dessous, que la vidéo n’est pas centrée et n’occupe pas toute la largeur de l’article. Ce qui n’est pas très joli à voir.

Etape 3: Ajouter Une Classe CSS, Et Le Code CSS

Dans cette étape nous allons définir une classe css qu’on nommera « video-responsive » et l’ajouter à la balise <figure> comme indiqué ci-dessous :

<figure class="video-responsive"><iframe width="560" height="315"
src="https://www.youtube.com/embed/Fn83BDt0r08" allowfullscreen="">
</iframe></figure>

Puis nous allons aller au niveau du menu « Apparence » pour cliquer sur le sous menu « Personnaliser » afin d’accéder à la page de personnalisation de notre thème. Ensuite comme indiqué dans l’image ci-dessous nous allons cliquer sur le menu « CSS additionnel » et ajouter le code css suivant :

.video-responsive { overflow:hidden; padding-bottom:56.25%; 

position:relative; height:0;}

.video-responsive iframe { left:0; top:0; height:100%;
 width:100%; position:absolute;}

Maintenant visualisons de nouveau notre article. Comme indiqué dans l’image ci-dessous, notre vidéo est dorénavant belle et bien centrée et occupe toute la largeur de l’article. Ce qui améliore considérablement le rendu de la page.

A noter que lors de vos prochaines intégrations de vidéos vous n’aurez plus besoin d’ajouter de code CSS additionnel. Vous aurez uniquement besoin de déclarer la classe « video-responsive » au niveau de la balise <figure>.

Vous pouvez aussi regarder la vidéo où j’aborde le même sujet disponible sur la chaine Youtube du blog. Le lien est juste ci-dessous :

Vous avez apprécié cet article ? Laissez nous alors un commentaire et restez connecté avec nous, en nous suivant sur Twitter, Facebook ou Youtube.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *