¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una propiedad?

[cristian_cena]

Hola amigos, resulta que estoy insertando videos de youtube en una pagina web.
(buscamos un video en youtube.com -> click en insertar -> copiamos el codigo que nos da youtube -> finalmente lo pegamos en nuestro sitio)

Si ya lo han echo notarán que el tag <object> toma el valor máximo de z-index,
y bien como estoy usando una galeria de imagenes de tipo showbox, he aqui el problema. Los videos se ven por encima de las fotos.

La solución para que esto no ocurra consta en poner wmode='transparent' al tag <embed> del codigo que nos da youtube, pero quisiera no tener que estar pegando a todos los videos este codigo adicional.

Para ello se me ocurrió que la solución seria encontrar todos los tags <embed> del documento y añadirle la propiedad wmode='transparent'

Pero no se como hacer esto. Cualquier link, tutorial o sugerencia es bienvenida.

Desde ya muchas gracias.

[GeoAvila]

que numero de z-index esta usando el video? revisalo en firebug, para revisar de lo contrario es unica superposicion de flash, entonces tendrias que aplicar z-indez en aquellos objetos que deseas que aparezcan sobre el video.

Nos Vemos

[cristian_cena]

Hola GeoAvila, gracias por responder. Firebug me marca "z-index:auto;" pero por mas que por via de css trate de poner el z-index en 0 o que de un valor 999 a lo demas sigue persistiendo el problema.

Prové hacer esto con jquery pero no agrega el atributo:

Código:

$(document).ready(function(){
	 $("embed").each(function (i) {
		 $('embed').attr("wmode","transparent");
	});
});

Lo que es curioso porque si hago esto desaparecen los videos:

Código:

		
$(document).ready(function(){
	$("embed").each(function (i) {
		$('object').css("display","none");
	});
});

Insisto: Agregando wmode="transparent" a <embed> desaparece el problema.

[masterpuppet]

Que tal cristian_cena, deberia funcionar y te comento que el each no es necesario

Código Javascript:

$(document).ready(function(){   
   $('embed').attr("wmode","transparent");
   $('object').css("display","none");
});
 

[cristian_cena]

Hola masterpuppet, muchas gracias por responder:

Comentarte que esto funciona:

Código Javascript:

$(document).ready(function(){   
   $('object').css("display","none");
});
 

Pero esto no:

Código Javascript:

$(document).ready(function(){   
   $('embed').attr("wmode","transparent");
});
 

Según leí (ignoro el tema) attr modifica el valor de un atributo, pero no añade un atributo nuevo.

P/D:

Código típico de youtube:
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/OQzvKEKtncQ?fs=1&amp;hl=es_ES&amp;color1=0x3a3a3a& amp;color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OQzvKEKtncQ?fs=1&amp;hl=es_ES&amp;color1=0x3a3a3a& amp;color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Código modificado por mi para que se borre el z-index que pone youtube:
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/OQzvKEKtncQ?fs=1&amp;hl=es_ES&amp;color1=0x3a3a3a& amp;color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OQzvKEKtncQ?fs=1&amp;hl=es_ES&amp;color1=0x3a3a3a& amp;color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344" wmode="transparent"></embed></object>

[masterpuppet]

Es extraño a mi me funciona, podrías postear el codigo del embed que estas utilizando ?, y en que browser estas testando ?.

[cristian_cena]

Si, realmente, justo acabo de editar la entrada anterior mostrando el codigo de youtube que copio y pego en mi pagina.

Lo estoy viendo en google chrome. En firefox se ve bien, ni hace falta incluir wmode='transparent'. En zafari se ve tan mal como en chrome.

[masterpuppet]

En realidad el atributo se setea, como lo estas comprobando ?, si lo miras a través de la herramienta para desarrolladores(pestaña elements), vas a ver que el atributo esta, capaz que al agregarlo "al vuelo" no tiene el efecto deseado, te hago una pregunta como cargas ese contenido ? con PHP ?

[cristian_cena]

En realidad el atributo se setea, como lo estas comprobando ?
No se de que me hablas. Probablemente aquí estoy fallando.

si lo miras a través de la herramienta para desarrolladores(pestaña elements), vas a ver que el atributo esta, capaz que al agregarlo "al vuelo" no tiene el efecto deseado
Tal cual, mirandolo con esta herramienta veo que jquery añade el atributo


te hago una pregunta como cargas ese contenido ? con PHP
Si, a traves de un panel de control cargo en un textarea el codigo de youtube y lo inserto en una BD. Luego en el frente de la pagina muestro todos los registros (videos).

Lo extraño es que si tipeo a mano el atributo y guardo el registro en la base de datos, cuando recupero los registros toma perfectamente el wmode y con ello se soluciona el problema.

[masterpuppet]

Al parecer alterar el valor wmode a traves de js sin recargar el object no surte efectos, asi que vamos a probar algo:

Código Javascript:

$(document).ready(function(){ 
   $('embed').attr("wmode","transparent").wrap('div');
});
 

Igualmente creo que la solucion mas adecuada seria parsear el html con DOMDocument, agregar el nuevo atributo y luego guardar en la BBDD.

Probalo y nos comentas.

Saludos.

[cristian_cena]

Perfecto!! Muchas gracias masterpuppet, se solucionó el z-index, ahora la galería lightbox se muestra perfectamente encima de los videos. Tambien gracias por la sugerencia de usar DOMDocument.
Me pondré manos a la obra. Un fuerte abrazo.