9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Video side by side

by 9999
6 replies
  • WEB DESIGN
    • |
I am building a wordpress website, say if the page is 960 wide. I would like to have 2 youtube videos side by side with alittle space between.

Wondering that code I might use to allow me to do this>

Thanks!
#side #video
  • Profile picture of the author David V
    There are many ways to do that.
    The short answer is they would both float left (or right). So don't create a new <p> or the second vid will simply drop down.
    How you should insert it depends on your theme, etc...
    Many themes have column shortcodes, so you could just create a 2-column in the editor and drop the vids into each column.
    You could also just float them both left.
    Make sure to NOT split the 960 equally. You need to account for padding, etc...

    I didn't post any custom code because it really shouldn't be needed. Everything you need should be there in the editor and of course the theme your using.
    {{ DiscussionBoard.errors[7748417].message }}
    • Profile picture of the author FreshAndThemes
      You could also have a look at some simple newish CSS "Display: Inline-Block" so for instance see below:

      HTML Code:
      <div>
<section class="video">
<!--  Video Code -->
</section>

<section class="video">
<!--  Video Code -->
</section>
</div>
      In your CSS you could do something like below:

      HTML Code:
      <style>
.video {
width: 245px /* or whatever you want */
display: inline-block;
}
</style>
      Hope that inspires you
      {{ DiscussionBoard.errors[7748605].message }}
      • Profile picture of the author jaydeee
        I had similar requirement so I learned that youtube video can be resized, I just do not know the max and min sizes.
        {{ DiscussionBoard.errors[7749780].message }}
        • Profile picture of the author NatesMarketing
          I would just do a two column table:
          HTML Code:
          <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Embed code for video 1 from youtube</td>
    <td>Embed code for video 2 from youtube</td>
  </tr>
</table>
          {{ DiscussionBoard.errors[7751280].message }}
          • Profile picture of the author 9999
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
            <td>Embed code for video 1 from youtube</td>
            <td>Embed code for video 2 from youtube</td>
            </tr>
            </table>
            Thanks for all the replies, gave this one a try and it worked perfectly!!
            {{ DiscussionBoard.errors[7751812].message }}
  • Profile picture of the author FreshAndThemes
    Happy you found a solution that worked for you
    {{ DiscussionBoard.errors[7751819].message }}

Trending Topics