[SOLUCIONADO] Como quitar parte de un codigo?

[yopmail]

Hola tengo el siguiente código: https://codepen.io/anon/pen/NQvxZW y quisiera quitar la foto miniatura del video, al quitarla literalmente del código lo que sucede es que si clicas en el fondo negro no se reproduce el video..

Muchas Gracias

[ArturoGallegos]

Claro, es mas que obvio, es porque el contenedor que tiene el listener toma el alto y ancho del contenido, si quitas la imagen este queda reducido al icono de play, para corregirlo deberas meter otro elemento en su lugar o bien hacer que el play abarque todo el ancho.


Si te fijas al hacer click sobre el icono de play sigue funcionando

[yopmail]

Iniciado por ArturoGallegos

Claro, es mas que obvio, es porque el contenedor que tiene el listener toma el alto y ancho del contenido, si quitas la imagen este queda reducido al icono de play, para corregirlo deberas meter otro elemento en su lugar o bien hacer que el play abarque todo el ancho.


Si te fijas al hacer click sobre el icono de play sigue funcionando

Si, gracias! probé de hacer el container 100% de alto y ancho con css pero no ha funcionado, no entiendo por que..

La unica solucion seria poner una imagen negra? seria un poco sin sentido o si

Muchas gracias compa..

[yopmail]

ni idea verdad?

[ArturoGallegos]

No, no es que no tenga idea.... solo aveces no tengo mucho tiempo.

Como te dije en mi mensaje anterior

para corregirlo deberas meter otro elemento en su lugar

Mira es tan facil como cambiar esto

Código Javascript:

function labnolThumb(id) {
 var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
 play = '<div class="play"></div>';
 return thumb.replace("ID", id) + play;
 }
 

con esto

Código Javascript:

function labnolThumb(id) {
  return '<div><div class="play"></div></div>';
 }
 

y en el CSS cambias esto

Código CSS:

.youtube-player img {
        bottom: 0;
        display: block;
....
 

por esto

Código CSS:

.youtube-player > div {
        bottom: 0;
        display: block;
....
}
 

Tema resuelto.

[yopmail]

Mil Gracias amigo! sin tu ayuda dudo que lo haya podido lograr... llevo no se cuanto saños en fororosdelweb y me has ayudad un monton en mis proyectos gracias de corazon!

Iniciado por ArturoGallegos

No, no es que no tenga idea.... solo aveces no tengo mucho tiempo.

Como te dije en mi mensaje anterior


Mira es tan facil como cambiar esto

Código Javascript:

function labnolThumb(id) {
 var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
 play = '<div class="play"></div>';
 return thumb.replace("ID", id) + play;
 }
 

con esto

Código Javascript:

function labnolThumb(id) {
  return '<div><div class="play"></div></div>';
 }
 

y en el CSS cambias esto

Código CSS:

.youtube-player img {
        bottom: 0;
        display: block;
....
 

por esto

Código CSS:

.youtube-player > div {
        bottom: 0;
        display: block;
....
}
 

Tema resuelto.