Saturday, 09 November 2024
Haz transparente un vídeo insertado desde Youtube PDF Print E-mail
MULTIMEDIA - MULTIMEDIA
Written by Jorge Carlos Castillo Queiroz   
Tuesday, 17 May 2011 19:50
There are no translations available.

youtube-rentals

Es posible que al insertar un vídeo desde Youtube con el nuevo método iframe compruebes que, dependiendo del navegador que utilices, el vídeo pueda crear algún conflicto con determinados elementos de tu página web, Foro , Blog ...

Dependiendo del navegador  cuando inserto un vídeo desde Youtube (iframe) algunos de los elementos no estáticos que componen mi página, como imágenes (escalables) o menús (desplegables), quedan siempre por detrás del vídeo en el navegador Internet Explorer, mientras que en otros navegadores tanto la imagen como el menú  se comporta normalmente y aparecen por delante del vídeo.

Ésto se debe a que  el vídeo se comporta como transparente en unos navegadores y en otros no, por lo que para solucionarlo habrá que hacerlo transparente.

Anteriormente Youtube utilizaba un único método de inserción de vídeos, el Embed de inserción de vídeo, sin causar éste tipo de problemas en Internet Explorer.

Al pulsar sobre una imagen escalable, el vídeo desaparecía momentaneamente, para volver a aparecer al cerrar la imagen.

Parece ser que éste nuevo método para  insertar vídeos con HTML5  (iframe) es el que va a primar en el futuro, por tanto he pensado que debía de encontrar una solución al problema, ya que existe la posibilidad de que Youtube termine por eliminar la opción:

Utilizar código de inserción anterior 

Mi primer paso fue tratar de encontrar la solución dentro de la propia css  y trasteé con la propiedad de capas z-index, pero no había manera, el vídeo incrustado con iframe siempre quedaba por encima de la imagen en el Navegador de Internet Explorer.

Al final la solución no era tan complicada estaba claro que el tema era hacer el vídeo transparente utilizando  el parámetro wmode=”transparent”

El Problema era dónde incluir el parámetro dentro del código para que funcionara correctamente.

Traté de incluir el parámetro wmode=”transparent”  en distintas posiciones dentro del código de inserción, para lo que hice varias pruebas que a continuación os detallo:

 

Prueba 1

 Lo incluyo detrás del src