Transférer un Wordpress local sur un serveur en ligne !
Tutoriel Wordpress
Dans ce tutoriel, nous allons découvrir comment facilement rendre responsive n'importe quelle vidéo Youtube intégrée sur notre site, et ce de façon très simple et rapide!
Publié le 28 avril 2019
Tous les articles
Lors de la création de sites web, il est parfois nécéssaire d’intégrer dans notre page des vidéos extraites de Youtube. Grâce ou l’outil embed et les iframe qu’il génère, cela devient assez simple. Néanmoins, un problème apparait très rapidement : la vidéo que vous venez d’intégrer n’est pas responsive.
En 2019, il est impensable de ne pas offrir un design fluide à sa plateforme web ! C’est pourquoi nous allons voir ensemble comment pallier a ce problème de façon rapide et simple, grâce à nos alliés, le HTML/CSS. Voyons donc ensemble comment rendre les vidéos Youtube intégrées responsive !
Vous pouvez également consulter ce tutorial en vidéo, pour plus de facilité. N’hésitez pas a consulter ma chaîne Youtube !
Pour commencer, il nous faut une vidéo à intégrer. Pour en récupérer une depuis Youtube, rendez vous sur l’url de cette dernière, cliquez sur « partager » (en bas à droite de la vidéo) et ensuite sur « intégrer« . Copiez le code que la fenêtre qui vient de s’ouvrir vous donne. Une fois votre code récupérer, rendez-vous sur votre éditeur de texte.
Le code HTML sera assez simple. Autour de la balise iframe que Youtube vous aura donné, ajoutez simplement une div avec la classe de votre choix. Dans mon cas, ca sera « iframe__container ». Informations supplémentaires, notez bien les valeurs des balises width et height, elles nous seront utiles juste après !
<div class="iframe__container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/71Es-8FfATo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>C’est ici que la magie va opérer. Sur notre container, nous allons simplement ajouter une width et une position relative.
.iframe__container{
width: 80%;
position: relative;
}Nous lui ajouterons également un pseudo-élement :after :before, selon ce que vous préférez.
.iframe__container::after{
content:"";
display: block;
width: 100%;
padding-bottom: calc(315/560*100%);
}C’est cette partie du code qui va nous permettre de garder le ratio largeur/hauteur de la vidéo. En effet, le padding-bottom de l’élément sera la hauteur finale de notre div container (cette div n’ayant aucun autre contenu). Pour garder le ratio, nous allons utiliser une fonction css : calc(). Nous allons donc diviser la hauteur par la largeur de notre vidéo (données dans la balise iframe que Youtube nous renvoyer) pour obtenir le ration à calculer. Ainsi, la hauteur sera toujours en adéquation avec la largeur évoluant au fil du temps !
Enfin, ajoutons ce CSS pour notre iframe contenu dans la div :
iframe{
position: absolute;
width: 100%;
height: 100%;
top:0px;
left: 0px;
}En positionant l’iframe en absolute, elle va sortir du flux et perdre ses attributs « auto » de hauteur et largeur. Nous allons donc lui faire prendre 100% de la hauteur et de la largeur de son parent, c’est à dire notre container! Elle sera donc elle même responsive !
Voici le CSS final que vous devriez obtenir :
Et c’est tout ! Tout devrait maintenant rouler pour vous, et les vos vidéos sur votre nouveau site web ! En cas de soucis, n’hésitez pas à commenter la vidéo pour obtenir de l’aide.
A bientôt, Axel.
Tutoriel Wordpress
Comme vous le savez déja, je m’appelle Axel Cardinaels. Je suis âgé de 27 ans et je proviens d’Oupeye, une charmante petite bourgade de la région de Liège.
Titulaire d’un bachelier en Développement Web et d’un Master en Communication, je passe mon temps à vous façonner la plateforme web dont vous revez 🐑 J'occupe également le poste de Software Engineer chez Deuse
Ceci est un espace dédié à votre imagination. Pour vous accompagner, vous pouvez lancer/mettre en pause une petite musique rigolote en cliquant sur ce texte. 🎷