Vidéos YouTube et Vimeo responsives

Avant de commencer à expliquer comment rendre les vidéos responsives, définissons ce que responsive veut dire :

Un site responsive change son apparence et la disposition en fonction de la taille de l'écran dans laquelle le site est affiché. Appliqué à la vidéo, c'est un redimensionnement de l'image automatique par exemple lorsque l'on passe d'un écran de 30 pouces à un smartphone...

YouTube, Vimeo et les autres systèmes de vidéos en ligne permettent d'intéger leurs "players" (lecteurs vidéo) dans votre propre site. Néanmoins, youTube, Vimeo et les autres ne fournissent pas de vidéo "responsives" par défaut.

Dans ce court tutoriel, nous allons vous montrer comment rendre YouTube, Viméo ainsi que les autres vidéos "responsives" dans votre site web en ajoutant juste quelques lignes de "CSS".

1 - Récupérer le code d'intégration de YouTube

  • Aller sur Youtube
  • Trouver la vidéo que vous voulez diffuser sur votre site
  • Cliquer surtout Partager(Share) ==> Intégrer(Embed) ==> click droit et copier le code HTML

responsivevideos 1

2 - Utiliser le code intégré

Coller le code d'intégration dans votre site web. Cela devrait ressembler à ceci :

utiliserlecode

3 - Modifier le code importé

Intégrez votre code dans une balise DIV. Utilisez la classe CSS "Video-responsive" de telle sorte que votre code ressemble à cela :

modifierlecode

 4 - Ajouter le CSS

Maintenant ajoutez quelques propriétés CSS dans l'un de vos fichiers de feuille de style.

ajouterlecss

Votre vidéo est maintenant responsive. Testez la dans votre navigateur.

Le même procédé fonctionne pour les videos Vimeo ainsi que n'importe quel service utilisant une balise iFrame.

Traduit de l'article : Responsive YouTube and Vimeo Videos

Notez cet article:
0
Le guide du débutant pour Zoo de YooTheme CCK pour...
Fatigué de changer l'ordre des articles sur la pag...

Articles en relation

Commentaires

 
Pas encore de commentaire
Déjà inscrit ? Connectez-vous ici
Guest
lundi 14 octobre 2019
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.