Comment ajouter du texte sous la vidéo

Question

Je crée un site Web et il a un arrière-plan vidéo en plein écran avec une barre de navigation et je veux faire défiler la vidéo vers le bas et voir le texte en dessous. Chaque fois que j'ajoute du texte, le texte passe sous la vidéo et non après. Je veux continuer la page Web après que quelqu'un ait fait défiler pour qu'il puisse y avoir plus de contenu en dessous (c'est-à-dire des paragraphes sur la page)

J'utilise également Twitter Bootstrap 3, donc je ne sais pas si cela change quelque chose.

Le jsfiddle

HTML:

<section id="video">
  <div class="video-container">
  <!-- SAMPLE VIDEOS -->
    <video autoplay="true" loop="true" muted="true" class="main-video" poster="http://placehold.it/350x150">
      <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
      <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
      <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
      <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
    </video>
  </div>

Bonjour le monde!

J'apprécierais vraiment si vous pouviez m'aider avec cela. Je vous remercie.

css html twitter-bootstrap html5-video

2

user7797712 21 avril 2017 à 11:38

Answer 1

Vous pouvez utiliser un position:relative sur le conteneur vidéo et définir la hauteur de la vidéo sur 100vh.

.video-container{
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

0

Fons Winters 21 avril 2017 à 08:43

Answer 2

.video-container{
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

Veuillez me faire savoir si c'est ce que vous vouliez.

1

Sree Nath 21 avril 2017 à 08:44

Answer 3

Essayez ce code ci-dessous

<style type="text/css">
    .video-container{
    flot:left;
    width: 100%; 
    }
    .video-container video{width: 100%; height: 100vh;}
    .video-container p{width: 100%; line-height:26px; font-size:24px; text-align:center; padding-bottom:50px;}

    </style>
    <div class="video-container">
      <!-- SAMPLE VIDEOS -->
        <video autoplay loop muted="true" class="main-video" poster="http://placehold.it/350x150">
          <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
          <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
          <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
          <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
        </video>
        <p>this is testing</p>
      </div>

0

Shital Marakana 21 avril 2017 à 08:54

Comment ajouter du texte sous la vidéo

3 réponses

Questions connexes

De nouvelles questions

css