| Haz transparente un vídeo insertado desde Youtube |
 |
 |
 |
| MULTIMEDIA - MULTIMEDIA | |
| Escrit per Jorge Carlos Castillo Queiroz | |
| dimarts, 17 de maig de 2011 19:50 | |
|
There are no translations available.
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
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/VWJ_kTKhLx0" frameborder="0" wmode=”transparent” allowfullscreen></iframe>
NO IDENTIFICA EL PARÁMETRO EL VÍDEO NO ES TRANSPARENTE ------------------------------------
Prueba 2 Lo incluyo dentro del src
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/VWJ_kTKhLx0wmode=transparent" frameborder="0" allowfullscreen></iframe>
NO CARGA EL VÍDEO - COSA LÓGICA - BUSCA UN ENLACE QUE NO EXISTE ------------------------------------
Prueba 3 Desactivo la opción por defecto de Incluir vídeos relacionados, ya que estoy tratando de hacer un único vídeo transparente, y copio el nuevo código de inserción del vídeo de Youtube.
Ahora incluyo el parámetro “wmode” dentro del src
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/VWJ_kTKhLx0?rel=0wmode=transparent" frameborder="0" allowfullscreen></iframe>
CARGA EL VÍDEO - PERO NO ADQUIERE LA PROPIEDAD DE TRANSPARENCIA ------------------------------------ Para que adquiera la propiedad de transparencia necesito algún carácter que separe el enlace del parámetro.
SOLUCIÓN: Busco un carácter especial en html que me sirva para separar el enlace al vídeo del parámetro con la propiedad de transparencia, y lo encuentro en la página: http://www.webtaller.com/construccion/lenguajes/html/lecciones/internacionalizacion-html.php
& representa el signo &. que me servirá para separar el enlace del vídeo del parámetro.
Incluir vídeos relacionados Como puedes ver en la imagen
La diferencia con el anterior código (Incluir vídeos relacionados) es la que ves marcada en rojo en el código.?rel=0
Como aquí ves: src=”http.://www.youtube......../VWJ_kTKhLx0?rel=0&wmode=transparent”
VÍDEO DEMOSTRACIÓN:
|
