Member Avatar for satimis

Hi all,

There are 12 video. They are displayed on screen virtically.

<p><b><span style="color: white"><i>This is Video 1</i></span></b></p>
<video id="my_video_1" class="video-js vjs-default-skin" controls
  preload="auto" width="600" height="364" poster="video_1_picture.png"
  data-setup="{}">
  <source src="video_1.mp4" type='video/mp4'>
  <source src="video_1.ogv" type='video/ogg'>
</video>
<br>
<br>
<p><b><span style="color: white"><i>This is Video 2</i></span></b></p>
<video id="my_video_1" class="video-js vjs-default-skin" controls
  preload="auto" width="600" height="364" poster="video_2_picture.png"
  data-setup="{}">
  <source src="video_2.mp4" type='video/mp4'>
  <source src="video_2.ogv" type='video/ogg'>
</video>
<br>
<br>

etc.

What will be the simplest way to align them 3 in one row, 4 rows totally? TIA

B.R.
SL

  • 2 Contributors
  • 1 Reply
  • 53 Views
  • 12 Minutes Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

You can place each video element within a div. Add widths to each div, then float them to the left or right as needed. clear the floats between rows and repeat.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.