Intégrer une vidéo de manière responsive

Intégrer facilement une vidéo de votre choix de manière responsive grâce à la classe « embed-responsive » de Bootstrap. Un article plus récent traitant de l’intégration de vidéo responsive est disponible. Let’s go! Dans un premier temps il nous faut définir une div class « embed-responsive » qui accueillera la vidéo dans votre fichier HTML. <div class="embed-responsive">&nbsp;</div>   Dans […]

Posté le par Benoît Philibert|10360 vues

Intégrer facilement une vidéo de votre choix de manière responsive grâce à la classe « embed-responsive » de Bootstrap.


Un article plus récent traitant de l’intégration de vidéo responsive est disponible.

Let’s go!

Dans un premier temps il nous faut définir une div class « embed-responsive » qui accueillera la vidéo dans votre fichier HTML.

<div class="embed-responsive">&nbsp;</div>

 
Dans cette balise de class « embed-responsive », nous allons définir notre iframe qui comprendra la vidéo avec la class « embed-responsive-item ». De base vous pouvez définir une largeur et hauteur.
 
Bien entendu, « src » sera la source URL de la vidéo.

<div class="embed-responsive"><iframe class="embed-responsive-item" src="…" width="300" height="150"></iframe></div>

 
Dirigez-vous maintenant sur la plateforme vidéo de votre choix (Youtube, Viméo,…) pour y récupérer le « code embed » que nous collerons dans le code source « src » de notre balise iframe.

<div class="embed-responsive"><iframe class="embed-responsive-item" src="http://www.youtube.com/embed/pYf5deeiPf4" width="300" height="150"></iframe></div>

 
Vous pouvez customiser votre iframe en lui définissant une taille prédéfinie :

<!-- taille en 16/9 -->
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="http://www.youtube.com/embed/pYf5deeiPf4" width="300" height="150"></iframe></div>
ou

<!-- taille en 4/3 -->
<div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="http://www.youtube.com/embed/pYf5deeiPf4" width="300" height="150"></iframe></div>

 
Enfin, vous avez la possibilité de définir des propriétés de bases pour votre iframe comme la lecture en full screen en rajoutant « allowfullscreen » ou l’autoplay avec « autoplay=1 ». Découvrez en un peu plus sur le wiki W3C.

<!-- Full screen -->
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="http://www.youtube.com/embed/pYf5deeiPf4" width="300" height="150" allowfullscreen="allowfullscreen"></iframe></div>
<!-- Autoplay -->
<div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="http://www.youtube.com/embed/pYf5deeiPf4" width="300" height="150"></iframe></div>

 


Ces articles pourraient vous intéresser

Tags

16 commentaires

    • Fabrice
    • (14 février 2015 at 2 h 33 min)

    Bonjour Benoit,

    Tout comme vous, je me suis pris de passion pour bootstrap. Malheureusement dans mon apprentissage je bloque sur l’intégration de vidéos. Que je suis suive pas à pas votre démonstration ou celle d’Open ClassRooms, pas moyen de mettre une vidéo à l’endroit que je désire. Firebug me montre bien que le code est là, mai, rien n’apparait. Je ne comprends pas. Auriez-vous une piste à me donner.

    Merci

    • Fabrice
    • (14 février 2015 at 3 h 09 min)

    Re – bonjour

    En testant les vues adaptatives de mon travail, je me suis rendu compte que partout ( jusqu’à 768px ) les vidéos étaient présentes et parfaitement adaptatives. Mais au-delà !!??

    • Bonjour Fabrice, pouvez vous copier coller votre code ici? Je pense que vous utiliser mal la grille ce qui doit restreindre l’affichage.

    • Rivo Mandan'i Aina
    • (14 mars 2015 at 17 h 35 min)

    thanks pour la démonstration :-D, et sympa la simplicité de votre page là !

    • eric
    • (13 mai 2015 at 16 h 48 min)

    Bonjour,

    j’aimerais savoir comment récupérer les styles css.
    Cordialement
    Eric

    • Ony
    • (14 août 2015 at 15 h 37 min)

    Bonjour,
    J’ai essayé ce tuto mais ça ne fonctionne pas, je voulais savoir si c’est parce que je suis en local que ca ne fonctionne pas ? Il me dit que Dreamweaver n’a pas trouvé le serveur « www.youtube.com » …. J’ai bien mis https devant.

    Merci pour votre aide

    • Salut Ony en effet si vous êtes hors-ligne la vidéo ne s’affichera pas.

    • Gauthier Ntudi
    • (19 août 2016 at 5 h 17 min)

    Salut! J’ai un petit problème toutes fois avec l’intégration des vidéos dans mes pages web. J’ai essayé d’utiliser les iframes mais juste quand j’actualise la page, la lecture de la vidéo se lance automatiquement. Autoplay=1 ou 0 ça fait toujours la même chose. Si vous pouvez m’aider avec ça… j’utilise bootstrap 3

    • Gauthier Ntudi
    • (19 août 2016 at 5 h 20 min)

    J’ai un petit blême , mes vidéos entre en lecture automatique quand j’actualise la pages web. J’utilise bootstrap.

    • Salut Gauthier, tu devrais regarder par ici. J’ai réalisé un travail sous Botstrap 3 codeur.com similaire. Clique sur le bouton play du premier block. Tu remarqueras que la vidéo est bien en autoplay lorsqu’on la lance et se coupe lorsque tu quittes la popup.

    • Hadrien
    • (15 janvier 2017 at 11 h 10 min)

    Merci pour ce tuto qui m’a permit d’y voir un peu plus clair avec cette partie que je considère assez floue de Bootstrap.

    • Avec grand plaisir ! Attention à bien prendre la version 3.4+ et non la version alpha actuelle pour que cela marche comme il se doit 😉

    • Eric Braidy
    • (4 mars 2019 at 13 h 56 min)

    Bonjour,
    merci pour ce tuto, comment faire pour enlever les « controles de la video ?
    Merci

    • tout dépend la source de ta vidéo. Si c’est Youtube, quand tu cliques sur le bouton de partage de ta vidéo, tu as « intégrer » et dans les options tu peux afficher ou masquer les contrôles.

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.