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!