Video player layout

pls help I want to add a player to this code… the player on top, and 4-6 videos aligned underneath the player. Kicker I want the videos to auto play one after the other… automatically

Please help!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<title>Sample</title>
<style type=“text/css”>
a img{border:none;}
#container {
width: 600px;
margin: 0 auto;
border: 1px solid #333333;
overflow:auto;
}

ul.thumbnails {
list-style: none;
float: left;
clear: both;
background: #f5f5dc;
width:580px;
margin:10px;
display:inline;
padding:0 0 10px;
}

ul.thumbnails li {
width: 52px;
height: 52px;
margin: 10px 46px 0;
float: left;
display: inline;
}

ul.thumbnails a {
width: 50px;
height: 50px;
text-decoration: none;
float: left;
border:1px solid #f5f5dc;
}
ul.thumbnails a:visited{border:1px solid blue}
ul.thumbnails a:hover{border:1px solid red}
ul.thumbnails a:active{border:1px solid green}

</style>
</head>
<body>
<div id=“container”>
<ul class=“thumbnails”>
<li><a href=“page.html”><img src=“image.jpg” width=“50” height=“50” alt=“thumbnail” /></a></li>
<li><a href=“page.html”><img src=“image.jpg” width=“50” height=“50” alt=“thumbnail” /></a></li>
<li><a href=“page.html”><img src=“image.jpg” width=“50” height=“50” alt=“thumbnail” /></a></li>
<li><a href=“page.html”><img src=“image.jpg” width=“50” height=“50” alt=“thumbnail” /></a></li>
<li><a href=“page.html”><img src=“image.jpg” width=“50” height=“50” alt=“thumbnail” /></a></li>
<li><a href=“page.html”><img src=“image.jpg” width=“50” height=“50” alt=“thumbnail” /></a></li>
<li><a href=“page.html”><img src=“image.jpg” width=“50” height=“50” alt=“thumbnail” /></a></li>
<li><a href=“page.html”><img src=“image.jpg” width=“50” height=“50” alt=“thumbnail” /></a></li>
</ul>
</div>
</body>
</html>

Hi Ragtube. Welcome to the forums. :slight_smile:

When you say a “player”, I assume you mean a gallery, where one image appears after another? If so, try out this:

http://jquery.malsup.com/cycle/

There are lots of other galleris, though, so if that’s not what you want, just explain clearly what you want to see on the page. :slight_smile:

Guys please excuse me if Im breaking the rules because this is not my intent…but I thinik I have to post a link so you know what I want. I want to create this layout: http://www.youtube.com/user/miraclewhip?feature=results_main

Thus the code I posted is the closest thing I have found… So when I ask for the player, I really need a large player on top of the 4 small thumbnails… that play automatically.

Also this is awesome how someone actually applied to my request WOW!

HI,

As far as placing an element above the thumbnails then that is easy.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample</title>
<style type="text/css">
a img { border:none; }
#container {
	width: 600px;
	margin: 0 auto;
	border: 1px solid #333333;
	overflow:auto;
}
ul.thumbnails {
	list-style: none;
	float: left;
	clear: both;
	background: #f5f5dc;
	width:580px;
	margin:10px;
	display:inline;
	padding:0 0 10px;
}
ul.thumbnails li {
	width: 52px;
	height: 52px;
	margin: 10px 46px 0;
	float: left;
	display: inline;
}
ul.thumbnails a {
	width: 50px;
	height: 50px;
	text-decoration: none;
	float: left;
	border:1px solid #f5f5dc;
}
ul.thumbnails a:visited { border:1px solid blue }
ul.thumbnails a:hover { border:1px solid red }
ul.thumbnails a:active { border:1px solid green }
[B].player {
	width:580px;
	height:400px;
	background:red;/* for testing */
	border:1px solid #000;
	margin:10px auto;
}[/B]
</style>
</head>
<body>
<div id="container">
		[B]<div class="player">Player goes here</div>[/B]
		<ul class="thumbnails">
				<li><a href="page.html"><img src="image.jpg" width="50" height="50" alt="thumbnail" /></a></li>
				<li><a href="page.html"><img src="image.jpg" width="50" height="50" alt="thumbnail" /></a></li>
				<li><a href="page.html"><img src="image.jpg" width="50" height="50" alt="thumbnail" /></a></li>
				<li><a href="page.html"><img src="image.jpg" width="50" height="50" alt="thumbnail" /></a></li>
				<li><a href="page.html"><img src="image.jpg" width="50" height="50" alt="thumbnail" /></a></li>
				<li><a href="page.html"><img src="image.jpg" width="50" height="50" alt="thumbnail" /></a></li>
				<li><a href="page.html"><img src="image.jpg" width="50" height="50" alt="thumbnail" /></a></li>
				<li><a href="page.html"><img src="image.jpg" width="50" height="50" alt="thumbnail" /></a></li>
		</ul>
</div>
</body>
</html>

Unfortunately I don’t know anything about video autoplay although I guess you would need to script it specifically if you want a series of thumbnails to play automatically. You can set the first to autoplay quite easily (although its generally not advised to do that) but you would probably need some pre-built script to chain a series of thumbnails to play automatically. Some of the sliders around will allow videos to be embedded but its not something I get involved in.

The slider Paul linked to is a good one, but als check out these two. I particularly like the first one:

http://bxslider.com/examples/thumbnails-pager-method-2
http://css-tricks.com/examples/FeaturedContentSlider/

Wow thanks Buddy!

I like the Thumbnails as pager - method 1

Only concern now… get it to work with videos. So Im going to try, and see if I can make this work.

Bro thanks…

$(function(){ // assign the slider to a variable var slider = $(‘#slider1’).bxSlider({ controls: false }); // assign a click event to the external thumbnails $(‘.thumbs a’).click(function(){ var thumbIndex = $(‘.thumbs a’).index(this); // call the “goToSlide” public function slider.goToSlide(thumbIndex); // remove all active classes $(‘.thumbs a’).removeClass(‘pager-active’); // assisgn “pager-active” to clicked thumb $(this).addClass(‘pager-active’); // very important! you must kill the links default behavior return false; }); // assign “pager-active” class to the first thumb $(‘.thumbs a:first’).addClass(‘pager-active’);});

<div class=“thumbs”> <a href=“”><img src=“/sites/all/themes/bx/images/pic_velvet1_thumb.jpg” /></a> <a href=“”><img src=“/sites/all/themes/bx/images/pic_velvet1_thumb.jpg” /></a> <a href=“”><img src=“/sites/all/themes/bx/images/pic_velvet1_thumb.jpg” /></a> <a href=“”><img src=“/sites/all/themes/bx/images/pic_velvet1_thumb.jpg” /></a></div>

I am almost there… YES!

Will someone tell me two things:

  1. Where do I adjust the code so the videos, play one after the other? Currently one video plays, and then restarts instead of selecting the next video etc…

  2. Does anyone know how to place the below information on the same line… I want the title on the left, and the tweet button on the right.

<h1>   <div align=“left”><font color=“#000000”>DJ Laurent Minassian</font></h1>

<div align=“right”><a href=“https://twitter.com/share” class=“twitter-share-button” data-text=“House Music” data-via=“ragtubemedia” data-hashtags=“HouseMusic”>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=“//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,“script”,"twitter-wjs”);</script>

Im loving this site… :slight_smile:

Not sure about the first issue, but for the second, you can give elements a width and float them left and right to make them sit side by side.

Try to avoid code like this, though:

<h1>&nbsp;&nbsp;&nbsp;<div align="left"><font color="#000000">DJ Laurent Minassian</font></h1>

That’s badly out of date. Instead, do something like this:

<h1>DJ Laurent Minassian</h1>

with accompanying CSS like this:

h1 {
  padding-left: 20px;
  color: #000;
}