article(s) dans votre panier VOIR

Insérer une vidéo en responsive (embed)

  • Vidéo 17 sur 23
  • 2h58 de formation
  • 23 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Insérer une vidéo en responsive (embed)
00:00 / 04:47
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
39,90€
  • Téléchargement + VOD à vie
  • Exercice / Validation des acquis
  • Accès uniquement à cette formation

Détails de la formation

Dans ce cours en ligne, l’expert vous apprend comment insérer une vidéo en responsive avec Bootstrap. Le but est de dynamiser votre site web avec une présentation vidéo. Pour ce faire, vous placez la vidéo de votre choix sur l’outil Side barre. Cet outil vous permet de créer une nouvelle Div dans laquelle vous mettez une iFrame. Cette dernière est utile pour inscrire les codes d’insertion de la vidéo. Pour récupérer ces codes iFrame, vous allez sur le site Vimeo.com. Sur ce site, vous activez la case Share et vous accédez à tous les codes iFrame qui se trouvent sur une nouvelle fenêtre. Vous copiez ces codes et vous les collez dans le code HTML de Bootstrap. Après avoir actualisé, vous constatez que la vidéo est visible sur la page. Toutefois, elle n’est pas encore responsive puisque sa dimension dépasse le bloc de la page. Pour éviter ce dépassement, vous encadrez d’abord l’iFrame d’une nouvelle Div et vous lui ajoutez deux classes spécifiques. Ensuite, vous présentez le ratio de présentation de la vidéo. Ce ratio peut être en 16/9 ou en 4/3. La dimension en 16/9 est plus large tandis que celle en 4/3 est un peu plus restreinte. Une fois le format choisi, votre vidéo est alors responsive. Sur votre page web, vous voyez qu’elle est contenue dans un seul bloc. Au terme de ce tuto, votre site web contient non seulement des contenus textuels mais également la vidéo de votre choix.