Buenas, tengo un carousel
de bootstrap
en el que, cuando hago click
en las imágenes que sustituyen por un vídeo del servidor.
Este es el código de uno de los items:
<div class="item active" id="unboxing" onclick="PonerVideo(this)">
<img src="img/unboxing.png">
</div>
Y cuando hago click
llamo a esta función:
function PonerVideo(ele){
var titulo = ele.id;
var old = ele.firstChild;
var node = document.createElement("div");
var src = document.createElement("iframe");
node.setAttribute("class", "embed-responsive embed-responsive-16by9");
src.setAttribute("class","embed-responsive-item");
src.setAttribute("src","img/"+titulo+".mp4" );
src.setAttribute("onclick", "Pausa(this)");
node.appendChild(src);
ele.replaceChild(node,old);
}
El vídeo sale bien, pero lo que hace es desplazar la foto debajo del vídeo, en vez de reemplazarla.
He probado a hacer remove child
también, pero eso dejaba la foto en su sitio con el vídeo debajo.
Pongo un iframe
porque si no el vídeo no cabe dentro del item del carousel
y no se ve. Los vídeos son del servidor donde alojo la web, no son de youtube ni nada por el estilo.
Se me debe estar escapando algo pero no sé el que.
<>
) para hacer un ejemplo donde se reproduzca el error? O tienes algun enlace online estilo jsfiddle? Recuerda mirar Cómo preguntar y ejemplo mínimo verificable para mejorar la calidad de la pregunta. Un saludo