Partage
  • Partager sur Facebook
  • Partager sur Twitter

adapter une vidéo a la grandeur de son conteneur

    21 mai 2019 à 14:55:46

    bonjour. j'ai télécharger une vidéo sur YouTube et je l'ai mis dans une balise vidéo qui est las une div 

    <div class="le_conteneur">
    	<video src="mon_video.mp4" class="la_video"></video>
    </div>

    div{width:200px; height:300px;}

    video{width:100%; height:100%;}

    le problème est que la balise vidéo prend bien le 100% mais l'image ne prend pas le 100% elle change en fonction de l’écran et ne respecte pas le div.

    je veut que mon image (vidéo) affiche a la grandeur complète du div

    j’espère être compris et merci beaucoup d'avance

    • Partager sur Facebook
    • Partager sur Twitter
      22 mai 2019 à 23:23:18

      Bonsoir, 

      alors déjà je te propose de voir ce code pour insérer une vidéo en HTML5, c'est plus simple ainsi :

      <div class="le_conteneur">
                                  <video id="video_control" poster="chemin\vers\une\miniature\NonRequis" controls autobuffer>
                                      <source src="chemin\vers\ta\vidéo"
                                              type="video/mp4" />
                                      Votre navigateur ne supporte pas le tag video
                                  </video>
                              </div>

      Remarque : Si ta vidéo est dans un autre format webm par exemple, suffit de remplacer mp4 par webm.

      Ainsi c'est plus facile et tu as la possibilité de changer grâce a <video width="" height=""> la longueur et largeur de ta vidéo à partir de la balise vidéo.

      Cordialement !

      • Partager sur Facebook
      • Partager sur Twitter

      Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

      adapter une vidéo a la grandeur de son conteneur

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown