Clicar na div que contém um ID e exibir vídeo do id clicado na div

[Wesley F Souza 1]

Então pessoal o código é mais ou menos assim.

 

<div class="verV" id="<? echo $tudoV['idVideo']; ?>"><img src="http://i1.ytimg.com/vi/<? echo $tudoV['idVideo']; ?>/default.jpg" title="<? echo $tudoV['titulo']; ?>" alt="<? echo $tudoV['titulo']; ?>" border="0" /></div>

 

Explicando melhor, cada div tem um ID diferente quando eu clicar na div do ID do vídeo ele dê um fadeIn no vídeo clicado. (Sem Atualizar a Página)

[William Bruno 1501]

Ok, e qual a dúvida ?

 

oque você já fez?

[Wesley F Souza 1]

Ok, e qual a dúvida ?

 

oque você já fez?

 

É assim, eu tenho uma div que mostra os vídeos mais recentes do site, ai em baixo tem um botão que ao clicar mostra todos os vídeos exceto o vídeo em destaque na home, queria que ao clicar em um dos vídeos ele expandisse para o tamanho 640x450 com o código do youtube mas não sei como fazer isso passando totalmente pelo jquery sem usar get nem nada. Para não atualizar a página, pois esse é o que eu quero, que faça tudo sem dar refresh na página.

[William Bruno 1501]

basta trocar o html pelo novo html com a tag <object> correspondente ao vídeo que você quer exibir.

[Wesley F Souza 1]

basta trocar o html pelo novo html com a tag <object> correspondente ao vídeo que você quer exibir.

 

Como ficaria isso na prática willian? desculpe minha ignorância :S

Eu coloquei uma class pra poder dar uma ação no javascript e no ID coloquei o ID do vídeo mas, não consegui raciocinar pra terminar, parei nisso e não consegui expandir o vídeo.

[William Bruno 1501]

mostra oque você já fez.. te ajudar não é fazer para você.

 

tente.. mostre a tentativa.

[Wesley F Souza 1]

mostra oque você já fez.. te ajudar não é fazer para você.

 

tente.. mostre a tentativa.

Sim entendi, só queria saber como faz, pq não tenho ideia de como seja <object>

 

                         <div style="float:right; box-shadow:0 0 19px #666666; display:none; border-radius:10px; margin:30px 129px 0 0;" id="todos">

     <div class="verV" id="R9vpE0QdEGM"><img src="http://i1.ytimg.com/vi/R9vpE0QdEGM/default.jpg" title="Entrevista da TV Tem ao Clube do Botão - Lins" alt="Entrevista da TV Tem ao Clube do Botão - Lins" border="0" /></div>




            </div>


                             <div style="float:left; width:600px; color:#fff; padding:5px; background:#900; border-radius: 5px; box-shadow:0 0 10px rgba(153,0,0,0.6); font-size:13px; font-weight:bold; margin:30px 0 0 210px;" id="titulo" >Vídeo - Gols Final Taça Prata na 2ª Etapa do Circuito Regional - Lins Country Club</div>
            <div style="float:right; box-shadow:0 0 19px #666666; border-radius:10px; margin:20px 129px 0 0;" id="video">
            <iframe width="600" height="450" src="http://www.youtube.com/embed/H0qBB-us8uw?rel=0" frameborder="0" allowfullscreen></iframe>
            </div>
                         <a href="javascript:void(0)" style="color:#fff; background:#2a2a2a; border-bottom-left-radius:50px; border-top-left-radius:50px; border-top-right-radius:50px; padding:7px; width:100px; margin:20px 150px 0 0; float:right; box-shadow:0 0 10px #000;" id="mostrar">Ver Todos</a>


            </div>

   <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>


   <script type="text/javascript">

   $("#mostrar").click(function() {

	$("#video").fadeOut(0);
	$("#mostrar").fadeOut(0);
	$("#titulo").fadeOut(0);
	$("#todos").fadeIn(3000);


   });

   </script>

 

 

Ficou assim, na classe verV era onde iria clicar pra expandir o vídeo. fiz o while tudo certinho só falta isso mesmo.

[William Bruno 1501]

no teu caso é iframe:

  <iframe width="600" height="450" src="http://www.youtube.com/embed/H0qBB-us8uw?rel=0" frameborder="0" allowfullscreen></iframe>

 

igualzinho isso ai, basta mudar o ID do vídeo.

[Wesley F Souza 1]

no teu caso é iframe:

  <iframe width="600" height="450" src="http://www.youtube.com/embed/H0qBB-us8uw?rel=0" frameborder="0" allowfullscreen></iframe>

 

igualzinho isso ai, basta mudar o ID do vídeo.

 

Tipo, o vídeo está em miniatura de 134x98 se eu colocar o iframe, como faço pra quando clicar na miniatura ele expanda para 600x450 ? por isso a foto do youtube que já é feita dinamicamente!