0

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
2
Views
4 Years
Discussion Span
Last Post by JorgeM
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.