Need help with html videos

Asked

Viewed 40 times

-1

How do I put these 3 video next to each other with caption on the bottom?? code: 

<section id="projetos">
        <div class="container">
            <div class="font-weight-bold" style="margin-left: 20px; font-size: 29px; margin-bottom: 15px;">Projetos</div>
            <video  width="320" height="240" controls style="margin-right: 30px;">
                <source src="videos/video01.mp4" type="video/mp4">

            </video>
            <p><strong>Descriçao:</strong>Altomaçao.</p>
            <video width="320" height="240" controls style="margin-right: 30px;">
                <source src="videos/video02.mp4" type="video/mp4">
            </video>
            <p><strong>Descriçao:</strong>Altomaçao.</p>
            <video width="320" height="240" controls style="margin-right: 30px;">
                <source src="videos/video03.mp4" type="video/mp4">
            </video>
            <p><strong>Descriçao:</strong>Altomaçao.</p>




        </div>
    </section>

inserir a descrição da imagem aqui

html html5

  • Face on the responsiveness of the video take a look at this answer that will help you! https://answall.com/questions/246495/como-deixar-embed-youtube-responsivo-no-site-ao-abrir-quero-width-apare%C3%A7a-100/369847#369847

2 answers

1


I don’t recommend using float for various reasons, but mainly pq may be that their layout break and you need to make a clearfix.

I suggest the flex, so the items are organized in a more responsive way as you can see...

inserir a descrição da imagem aqui

Follow the above image code. Note that I have separated each group of elements within a container.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.videos {
  display: flex;
  justify-content: center;
}
video {
  width: 100%;
}
.box {
  margin: 0 10px;
}
<section id="projetos">
  <div class="container">
    <div class="font-weight-bold" style="margin-left: 20px; font-size: 29px; margin-bottom: 15px; text-align: center;">Projetos</div>
    <div class="videos">
      <div class="box">
        <video controls>
          <source src="videos/video01.mp4" type="video/mp4">
        </video>
        <p><strong>Descriçao:</strong>Altomaçao.</p>
      </div>
      <div class="box">
        <video controls>
          <source src="videos/video02.mp4" type="video/mp4">
        </video>
        <p><strong>Descriçao:</strong>Altomaçao.</p>
      </div>
      <div class="box">
        <video controls>
          <source src="videos/video03.mp4" type="video/mp4">
        </video>
        <p><strong>Descriçao:</strong>Altomaçao.</p>
      </div>
    </div>
  </div>
</section>

0

You can enter a div with float: left for each video, although there are several other ways to do this for example with display: flex (which is used by bootstrap).

<section id="projetos">
    <div class="container">
        <div class="font-weight-bold" style="margin-left: 20px; font-size: 29px; margin-bottom: 15px;">Projetos</div>

        <div style="float:left;">
            <video  width="320" height="240" controls style="margin-right: 30px;">
                <source src="videos/video01.mp4" type="video/mp4">

            </video>
            <p><strong>Descriçao:</strong>Altomaçao.</p>
        </div>

        <div style="float:left;">
            <video width="320" height="240" controls style="margin-right: 30px;">
            <source src="videos/video02.mp4" type="video/mp4">
            </video>
            <p><strong>Descriçao:</strong>Altomaçao.</p>
        </div>

        <div style="float:left;">                       
            <video width="320" height="240" controls style="margin-right: 30px;">
                <source src="videos/video03.mp4" type="video/mp4">
            </video>
            <p><strong>Descriçao:</strong>Altomaçao.</p>
        </div>
    </div>
</section>

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.