Video en lightbox con reproducción automática

[dryant]

Hola a todos!

Tengo una web en la cual he puesto una imagen que al pulsarla abre un video en un lightbox.

Necesito que al pulsar la imagen se abra el video y empiece areproducirse, por lo que al html del video le he puesto el atributo "autoplay".

El problema es que cuando carga la pagina la pagina, el video se empieza a escuchar aunque tenga la propiedad display="none" y cuando pulso la imagen se muestra el lightbox y vuelve a reproducirse solapándose los dos audios...

Este es el código:

Código HTML:

<a rel="lightbox" data-gall="gall-frame" data-lightbox-type="inline" href="#comercial"><img src="http://localhost:8888/blog/wp-content/uploads/2017/04/sp_vdo_comercial.png" class="thumbnail-comercial"><h3>anuncio</h3></a>
<div id="comercial" style="display:none; background-color:#000">
<video src="http://localhost:8888/blog/wp-content/uploads/2017/04/anuncio.mp4" controls="controls" autoplay width="100%" height="100%" >
Tu navegador no implementa el elemento <code>video</code>.
</video>
</div> 

El código del jquery no lo pongo porque, al estar la web hecha en base a wordpress, he usado un plugin llamado "Responsive Lightbox" en vez de programarlo a mano.

Alguna idea de como puedo evitar que el video se empiece a reproducir, aunque no se vea, y solo se reproduzca cuando el lightbox aparezca?

Un saludo y gracias!

[siddartha23]

Esa funcionalidad no depende de código html, se necesita modificar el código jquery/javascript...