Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de ¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una propiedad? en el foro de Javascript en Foros del Web. Hola amigos, resulta que estoy insertando videos de youtube en una pagina web. (buscamos un video en youtube.com -> click en insertar -> copiamos el ...
  #1 (permalink)  
Antiguo 07/01/2011, 17:27
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una propiedad?

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.
  #2 (permalink)  
Antiguo 07/01/2011, 17:32
Avatar de GeoAvila
Colaborador
 
Fecha de Ingreso: diciembre-2003
Ubicación: Antigua Guatemala
Mensajes: 4.032
Antigüedad: 21 años
Puntos: 53
Respuesta: ¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una pr

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
__________________
* Antes de preguntar lee las FAQ, y por favor no hagas preguntas en las FAQ
Sitio http://www.geoavila.com twitter: @GeoAvila
  #3 (permalink)  
Antiguo 07/01/2011, 18:32
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: ¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una pr

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.
  #4 (permalink)  
Antiguo 07/01/2011, 18:57
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: ¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una pr

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

Código Javascript:
Ver original
  1. $(document).ready(function(){  
  2.    $('embed').attr("wmode","transparent");
  3.    $('object').css("display","none");
  4. });
  #5 (permalink)  
Antiguo 07/01/2011, 19:06
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: ¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una pr

Hola masterpuppet, muchas gracias por responder:

Comentarte que esto funciona:
Código Javascript:
Ver original
  1. $(document).ready(function(){  
  2.    $('object').css("display","none");
  3. });

Pero esto no:
Código Javascript:
Ver original
  1. $(document).ready(function(){  
  2.    $('embed').attr("wmode","transparent");
  3. });

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>

Última edición por cristian_cena; 07/01/2011 a las 19:13
  #6 (permalink)  
Antiguo 07/01/2011, 19:13
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: ¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una pr

Es extraño a mi me funciona, podrías postear el codigo del embed que estas utilizando ?, y en que browser estas testando ?.
  #7 (permalink)  
Antiguo 07/01/2011, 19:15
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: ¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una pr

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.

Última edición por cristian_cena; 07/01/2011 a las 19:21
  #8 (permalink)  
Antiguo 07/01/2011, 19:29
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: ¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una pr

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 ?
  #9 (permalink)  
Antiguo 07/01/2011, 19:46
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: ¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una pr

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.
  #10 (permalink)  
Antiguo 07/01/2011, 20:23
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: ¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una pr

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:
Ver original
  1. $(document).ready(function(){
  2.    $('embed').attr("wmode","transparent").wrap('div');
  3. });

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.
  #11 (permalink)  
Antiguo 07/01/2011, 21:10
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: ¿como encontrar todos las etiquetas <embed> de la pagina y añadirle una pr

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.

Etiquetas: encontrar, etiquetas, propiedad
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:19.