jQuery: vídeos (youtube/vimeo) con imagen personalizada

Es posible que insertemos un video de youtube/vimeo en nuestra web y la imagen que muestra por defecto del video sea una imagen que poca calidad o muestre un fotograma que no nos interesa que se vea como imagen destacada, o simplemente queréis personalizar a vuestro estilo el botón de play y caja del video.

A continuación una forma de mostrar una primera imagen personalizada, con la foto que queramos y al hacer click sobre esta ya desaparecería y empezaría la reproducción del video de youtube/vimeo que tengamos.

Código jquery para reproducir el video y activar la clase del elemento cuando el video empieza a reproducirse:

$(".box-video").click(function(){
  $('iframe',this)[0].src += "&autoplay=1";
  $(this).addClass('open');
});

He creado una demo en codepen con 2 tipos de vídeo diferentes (youtube/vimeo) para que veáis el funcionamiento:

See the Pen jQuery: vídeos (youtube/vimeo) con imagen personalizada by Jorge Maiden (@jorgemaiden) on CodePen.