CODEWITHSUNDEEP
htmlcssvideohtml-table
Taolin
Taolin

Reputation: 91

Placing videos next to each other using a table

I need my videos to be next to each other horizontally. This is my HTML code

<div id="videoal">
<table>
<tr><td>
  <video width="200" height="200" controls>
    <source src="Videos.mp4" type="video/mp4">
    <source src="Videos.ogg" type="video/ogg">
  </video>
  </td></tr>
  <tr><td>
  <video width="200" height="200" controls>
    <source src="Video.mp4" type="video/mp4">
    <source src="Video.ogg" type="video/ogg">
  </video>
  </td></tr>
  </table>
</div>

The videos appear under each other in my webpage (vertical)

This is my CSS code

#videoal video
{
  margin: 30px 0px 0px 20px;
  float: left;
 }
 #videoal
 {
  margin: 50px 20px 10px 20px; /*TRBL*/
  width: 300px;
  }

Upvotes: 1

Views: 15339

Answers (3)

Xavier Mosh
Xavier Mosh

Reputation: 51

Because of the tag "Video" I assume that you're using HTML5, so, I think you could find a more semantic way to achieve this.

anyway, the problem on your html code is in the table, there are Rows and columns, and you're using two rows, that's why the videos stack vertically, you can fix that deleting one "tr" tag and embracing both videos with only one of this tag.

there is an example;

<div id="videoal">
<table>
<tr>
  <td>
  <video width="200" height="200" controls>
    <source src="Videos.mp4" type="video/mp4">
    <source src="Videos.ogg" type="video/ogg">
  </video>
  </td>
  <td>
  <video width="200" height="200" controls>
    <source src="Video.mp4" type="video/mp4">
    <source src="Video.ogg" type="video/ogg">
  </video>
  </td>
  </tr>
  </table>
</div>

http://jsfiddle.net/B6j2v/

also you could use html5; "section" and "article" tags, the second one to wrap the videos and then stack horizontally with a "display: inline-block"

Hope this help you.

Upvotes: 1

random_user_name
random_user_name

Reputation: 26170

Both the markup and your css have issues.

First, you have each video in it's own row. See the revised markup below, which will place two videos side by side in each row:

<div id="videoal">
<table>
    <tr>
        <td>
            <video width="200" height="200" controls>
                <source src="Videos.mp4" type="video/mp4">
                <source src="Videos.ogg" type="video/ogg">
            </video>
       </td>
       <td>
           <video width="200" height="200" controls>
              <source src="Video.mp4" type="video/mp4">
              <source src="Video.ogg" type="video/ogg">
           </video>
       </td>
    </tr>
</table>
</div>

Next, the css has a few things that need to be changed:

1) Don't float the video. That serves no purpose at this point, since you're already getting them side-by-side with table cells:

2) The video container div has a width of 300px, but the videos themselves have widths of 200px each, plus 20px left margin. So, make the container wider (at least 440px, probably more to allow padding, cellspacing, etc):

#videoal video {
     margin: 30px 0px 0px 20px;
 }

 #videoal {
     margin: 50px 20px 10px 20px
     width: 440px;
 }

And finally, don't use tables for layout. They are very rigid / brittle, and really don't do well with responsive design.

Below is a better structure for what you want to do:

<div id="videoal">
    <div class="video">
        <video controls>
            <source src="Videos.mp4" type="video/mp4">
            <source src="Videos.ogg" type="video/ogg">
        </video>
    </div>
    <div class="video">
       <video controls>
           <source src="Video.mp4" type="video/mp4">
           <source src="Video.ogg" type="video/ogg">
       </video>
    </div>
</div>

With the following css:

#videoal {
    /* ... put any margin, padding, etc. here you like */
}

#videoal div.video {
    display: inline-block;
    zoom: 1;
    *display: inline;
    width: 200px;
    height: 200px;
    margin: 0 10px 10px 0;
}

#videoal div.video video {
    width: 100%;
    height: 100%;
}

What is nice about this is:

  1. You can quickly change it to a 3, 4, 5, etc column layout
  2. If the width of the screen changes, you could have these begin to automatically stack into fewer columns (good for mobile, etc)
  3. Revisions become simple.

Upvotes: 2

user3661424
user3661424

Reputation:

html 

<div id="videoal">
    <table>
    <tr>
      <td>
      <video width="200" height="200" controls>
        <source src="Videos.mp4" type="video/mp4">
        <source src="Videos.ogg" type="video/ogg">
      </video>
      </td>
        <td>
      <video width="200" height="200" controls>
        <source src="Videos.mp4" type="video/mp4">
        <source src="Videos.ogg" type="video/ogg">
      </video>
      </td>
        </tr>
      </table>
    </div>

css

#videoal video
{
  margin: 30px 0px 0px 20px;
  float: left;
 }
 #videoal
 {
  margin: 50px 20px 10px 20px; /*TRBL*/
  width: 300px;
  }

DEMO

Upvotes: 0

Related Questions