www.webdeveloper.com
Results 1 to 5 of 5

Thread: 3 rows of videos..

  1. #1
    Join Date
    Jun 2009
    Posts
    38

    3 rows of videos..

    Hi,

    I need to create 3 rows of columns for my videos.

    I have the page all set up, am going to delete the right column to allow more room.
    http://www.leehughes.co.uk/Video/index.html

    I would like them in a row of three centered in the page and any other videos that i add will just join them in the following place.

    I have had a play but my lack of css knowledge shines through

    .video{
    width:400px;
    height:300px;
    margin:0px;
    display:inline;/* ie6 fix */

    }

  2. #2
    Join Date
    Apr 2009
    Posts
    122
    Hi leehughes,
    You could use tables for your layout, and the rows would be even throughout, if you have large video titles. If you did it using DIVs (Which i would personally), this is a quick example of how you could do so:

    Code:
    <style>
    
    #videoContainer {
    	width: 1000px;
    	margin: 0px auto;
    }
    .video {
    	float: left;
    	width: 328px; 
    	height: 300px;
    	display: block;
    	margin-right: 5px;
    }
    
    </style>
    
    <div id="videoContainer">
    
    	<div class="video">
    	  <object width="400" height="300">
    	  <param name="allowfullscreen" value="true" />
    	  <param name="allowscriptaccess" value="always" />
    	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
    	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
    	  </object>
    	</div>
    
    	<div class="video">
    	  <object width="400" height="300">
    	  <param name="allowfullscreen" value="true" />
    	  <param name="allowscriptaccess" value="always" />
    	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
    	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
    	  </object>
    	</div>
    	
    	<div class="video">
    	  <object width="400" height="300">
    	  <param name="allowfullscreen" value="true" />
    	  <param name="allowscriptaccess" value="always" />
    	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
    	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
    	  </object>
    	</div>
    	
    	<div class="video">
    	  <object width="400" height="300">
    	  <param name="allowfullscreen" value="true" />
    	  <param name="allowscriptaccess" value="always" />
    	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
    	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
    	  </object>
    	</div>
    	
    	<div class="video">
    	  <object width="400" height="300">
    	  <param name="allowfullscreen" value="true" />
    	  <param name="allowscriptaccess" value="always" />
    	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
    	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
    	  </object>
    	</div>
    	
    	<div class="video">
    	  <object width="400" height="300">
    	  <param name="allowfullscreen" value="true" />
    	  <param name="allowscriptaccess" value="always" />
    	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
    	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
    	  </object>
    	</div>
    	
    	<div class="video">
    	  <object width="400" height="300">
    	  <param name="allowfullscreen" value="true" />
    	  <param name="allowscriptaccess" value="always" />
    	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
    	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
    	  </object>
    	</div>
    	
    	<div class="video">
    	  <object width="400" height="300">
    	  <param name="allowfullscreen" value="true" />
    	  <param name="allowscriptaccess" value="always" />
    	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
    	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="320" height="240"></embed>
    	  </object>
    	</div>
    	
    	<div class="video">
    	  <object width="400" height="300">
    	  <param name="allowfullscreen" value="true" />
    	  <param name="allowscriptaccess" value="always" />
    	  <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
    	  <embed src="http://vimeo.com/moogaloop.swf?clip_id=5606003&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="328" height="246"></embed>
    	  </object>
    	</div>
    
    </div>
    Hope this helps in some way
    - Andy

  3. #3
    Join Date
    Jun 2009
    Posts
    38
    Thanks Andy,

    Everything is working great now however, I can't seem to add any padding around the video. The videos are pretty tight so I added a 5px padding around them. This padding caused the third vid to disappear and the padding didn't even appear on the first two vids..

    http://www.leehughes.co.uk/Video/index.html

  4. #4
    Join Date
    Apr 2009
    Posts
    122
    That was literally a 2 minute example i created, you'll have to modify the styles to accommodate. To add 5px either side, just minus 10 away from the width to allow for this.

    I work with px based layouts mostly so this is how i would do this, but please feel free to change to &#37; widths if thats what you're used to. Hope this helps
    - Andy

  5. #5
    Join Date
    Jun 2009
    Posts
    38
    thanks andy

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles