1

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.

2
  • Hola Victor. ¿Puedes usar el snippet de codigo integrado en el editor de preguntas (icono <>) 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
    – lois6b
    Commented el 23 ene. 2018 a las 9:23
  • Aqui tienes una pequeña demo. Solo esta la primera imagen y si clickas en ella pasa lo que describia arriba: mural.uv.es/vicgalo/slide/portada.html Commented el 23 ene. 2018 a las 9:58

1 respuesta 1

3

El problema es que ele.firstChild devuelve el NodeText que contiene el texto (espacios) que hay desde onclick="PonerVideo(this)"> a <img.

Solución 1:

Podrías usar ele.firstElementChild, en lugar de usar ele.firstChild:

La propiedad de sólo lectura ParentNode.firstElementChild retorna el primer hijo del objeto del tipo Element, o bien null si no existen elementos hijos.

Ejemplo:

function PonerVideo(ele){
    var titulo = ele.id;
    var old = ele.firstElementChild;
    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);
}
<div class="item active" id="unboxing" onclick="PonerVideo(this)">
    <img src="img/unboxing.png">
</div>

Solución 2:

Modificar el markup y eliminar los espacios.

<div class="item active" id="unboxing" onclick="PonerVideo(this)"><img src="img/unboxing.png"></div>
1
  • Muchas gracias. Estas cosas son las qu eme hacen sentir super tonto una vez resueltas -.- Commented el 23 ene. 2018 a las 10:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.