Css

[MasterStifler_ 0]

Olá, estou querendo criar um site de filmes online, mas estou com um problema nos players de vídeo.

Tipo gostaria de colocar o player de vídeo e que a cada botão que eu desse um clique mudava o video de acordo com o player.

Eu gostaria de fazer como o desse site http://www.filmesonlinegratis.me/ e outros de filmes online mais conhecidos. Se alguém puder me ajudar e dar dicas, desde já agradeço.

[thyquevedo 6]

Javascript:

$.quickTabs = function ()
{
 	var tabs = 'p#tabs';
	var contents = 'ul#contents';
 	$(contents + ' li').hide();
 	$(contents + ' li:first-child').show();
 	$(tabs + ' a').click(function()
	{
 		$(tabs + ' a').removeClass('selected');
 		$(this).addClass('selected');
 		$(contents + ' li').hide();
 		$(contents +  ' ' + $(this).attr('href')).show();
 		return false;
 	});
};
 
/* When all is ready */
 
$(document).ready(function()
{
 
	/* Start function */
 
	$.quickTabs();
 
});

HTML

<div id="box">
    <p id="tabs">
        <a href="#tab1" class="selected">tab 1</a>
        <a href="#tab2">tab 2</a>
        <a href="#tab3">tab 3</a>
    </p>
    <ul id="contents">
        <li id="tab1"><h1>Conteúdo 1</h1></li>
        <li id="tab2"><h1>Conteúdo 2</h1></li>
        <li id="tab3"><h1>Conteúdo 3</h1></li>
    </ul>
</div>

CSS

body {
	margin: 40px;
	font-family: Verdana;
}
div#box {
	display: inline-block;
	width: 800px;
	height: 600px;
}
div#box p#tabs {
	display: inline-block;
	width: 790px;
	height: 40px;
	margin: 0 10px 0 10px;
	padding: 0;
	overflow: hidden;
	vertical-align: bottom;
}
div#box p#tabs a {
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
	color: #666;
	text-decoration: none;
	padding: 12px 26px 12px 26px;
	margin: 0 5px 0 0;
	background-color: #f0f0f0;
}
div#box p#tabs a:hover {
	background-color: #999;
	color: white;
}
div#box p#tabs a.selected {
	background-color: #ffcc00;
	color: #000;
}
div#box ul#contents {
	display: inline-block;
	width: 798px;
	height: 558px;
	margin: 0;
	padding: 0;
	border: 1px solid #ccc;
}
div#box ul#contents li {
	display: inline-block;
	width: 758px;
	height: 528px;
	margin: 10px 20px 10px 20px;
	padding: 0;
	overflow: auto;
}

Link do exemplo