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

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.