¿Cómo cambiar la imagen de un video de Youtube?

¿Cómo cambiar la imagen de un video de Youtube?

Como ya saben estoy desarrollando un administrador de proyectos y el que no sepa en seguida les dejo la liga http://www.mxprojectm.com, bueno en la construcción de este sistema me aventure hacer un video promocional del proyecto.

Cuando subí el video a YouTube me di cuenta que la imagen que aparecía por default era de muy baja calidad, por eso me di a la tarea de investigar cómo cambiar la imagen por default, no la imagen en miniatura esta es muy sencilla de cambiar y hay muchos ejemplos en internet.

El video quedaba de la siguiente manera:

cambiar imagen por default youtube

Y con el truco que se me ocurrió quedo así:

cambiar imagen que pone le youtube de baja calidad

Cuál es el truco, bueno utiliza dos contenedores "div", uno que contenga la imagen de vista previa y una que contenga el código de inserción del vídeo. El div que contiene el vídeo estará oculto y será visible cuando se hace clic en la imagen. La imagen debe ser del mismo tamaño que el video.

Código de ejemplo:

<div onclick="document.getElementById('vidoPromocional').style.display='block'; this.style.display='none'">                        
     <img src="assets/admin/layout/img/youtubePromocional.png"  style="cursor: pointer;  width:430px; height:250px; "/>
</div>
<div id="vidoPromocional" style="display:none">
      <iframe width="430" height="250" src="//www.youtube.com/embed/nFWx_FAmalA?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

Esperamos que sea de tu agrado y sobre todo te sea de utilidad y te agradecería que nos dejaras tus comentarios en seguida.

Compartir

Comentarios (4)

  • Luis Fernando Responder

    Hola Buenas Noches, una Consulta, el truco que nos muestra, el video de inicia automaticamente, como haria cuando hacemos click en la imagen se reproduzca recien el video HELP!!!!!!!

    Sunday, October 15, 2017 6:19 PM
  • Luis Fernando Responder

    O alguna pagina web, que haya aplicado dicho truco ??

    Sunday, October 15, 2017 6:21 PM
  • Luis Fernando Responder

    O alguna pagina web, que haya aplicado dicho truco ??

    Sunday, October 15, 2017 6:21 PM
  • Daniel Responder

    Como hacer para que el vídeo al insertarlo a la web sea responsive, cual seria el codigo ? Muchas gracias

    Friday, November 10, 2017 11:21 AM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com