Publicado por: 3

Ahora vamos a hablar del clásico problema de cuando tenemos un lightbox y los vídeos de youtube salen por encima, o en general de cuando al abrir/expander/mostrar cualquier capa de nuestro html por javascript mediante un lightbox jQuery, o un drop down menu de mootools, o lo que sea, se nos queda cualquier SWF de flash que tengamos por encima.

Y ya le podemos poner z-index ya, que para el flash como si nada.

Esto como ya se ha dicho muchas veces es cuestión del wmode=”transparent”.

El problema bien cuando el que luego se va a encargar de meter los vídeos de youtube en la pagina que estamos haciendo es el cliente mediante el Tiny Editor o cualquiera de estos, o incluso poniéndolo a pelo en un textarea.

Si no nos curramos nada para que automáticamente se detecte el caso y añada el parámetro el sistema, al menos, si nos podemos currar una aviso muy sencillo para ponerlo encima del editor, y así cuando vaya a incluir el vídeo, podrá ver como hacerlo.

Aquí os dejo una imagen de como queda integrado en Joomla…

y el código:

<div>
Nota: <a href="#" onclick="jQuery('#yt_explain').toggle(); return false;">cómo debemos insertar vídeos de youtube</a> <br/>
<p id="yt_explain" style="display:none;">
    Para incluir videos de youtube <strong>utilizar el código antiguo</strong> (no el iframe).<br/>
    Además de tener en cuenta el tamaño del ancho (360px máximo) para obetner el codigo, una vez lo tengamos lo tendriamos que modificar ligeramente.<br/>
    Para que al mostrar la ventana de la/s imagen/es el video no se quede por encima, hay que añadir un parametro.<br/>
    Veremos que el código es de la forma:<br/>
    &lt;object&gt;&lt;param name=&quot;XXX&quot; value=&quot;YYY&quot;/&gt;<br/>
    Pues bien. Al final de todos los que aparecen, debes añadir uno m&aacute;s: <span style="color:red;">&lt;param name=&quot;wmode&quot; value=&quot;transparent&quot;/&gt;</span><br/>
    Ademas, veremos que tambien hay una cadena <span style="color:red;">&lt;embed</span> con xxxx=&quot;yyyy&quot;.<br/>
    Pues al final, antes del &gt; tambien añadiremos: <span style="color:red;">wmode=&quot;transparent&quot;</span>
</p>
</div>

Seguro que nos ahorra un montón de llamadas por teléfono o mails.

xD

3 Comentarios

  1. Litzor

    Hey, y si es un IFRAME? cómo diablos hago para que un video embebido de youtube no se me super ponga sobre el sexyLightbox…

    Cualquier help gracias ******

    1. Administrador Microteching Autor del artículo

      Podrías investigar si hay alguna forma de pasarle como parámetro al iframe <<&wmode=transparent>> para que youtube se lo ponga al flash que se acaba embebiendo.
      Por ahí deben ir los tiros…
      Ya nos cuentas que tal.
      Saludos!

  2. Litzor Colombia

    Encontré la solución!!! como los videos de youtube ahora se embeben como un iframe, toca colocar una variable al final de la ruta del video así:

    src=”http://www.youtube.com/embed/lZqrG1bdGtg?wmode=opaque”

    El wmode se coloca al final de la url que nos da youtube, no hay otra forma, traté de muchas formas y nada de resultados…

    Me funcionó para un hibrido de lightbox, debe funcionar para cualquier galería similar basada en jquery, saludos. Postea un articulo en español sobre ésto ya que no la hay…

    Fuente: http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.