Para personalizar la carátula o portada (lo que en desarrollo web se conoce como poster), la etiqueta <video> tiene un atributo nativo perfecto para esto.
1. Cambiar la carátula usando una imagen externa
Si quieres diseñar una portada personalizada (un archivo .jpg, .png o .webp), solo debes agregar el atributo poster="ruta/de/tu/imagen.jpg" dentro de la etiqueta <video>:
<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;" contenteditable="false" data-mce-contenteditable="true">
<video src="/images/videos/2026/hacer-bobina-para potencia-clase-D.mp4" poster="/images/videos/2026/portada-bobina.jpg" controls style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
Tu navegador no soporta la etiqueta de video.
</video>
</div>2. Elegir un segundo/momento clave del video sin crear una imagen
Si no quieres crear una imagen personalizada y prefieres que el navegador muestre un fotograma específico del video (por ejemplo, el segundo 10 o el minuto 1:30), puedes indicarlo agregando #t=segundos al final de la ruta del video en el src:
- Elegir un segundo concreto (ejemplo: segundo 15):
src="images/videos/2026/hacer-bobina.mp4#t=15" - Elegir minutos y segundos (ejemplo: 1 minuto y 30 segundos):
src="images/videos/2026/hacer-bobina.mp4#t=01:30"
Ejemplo aplicado:
<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;" contenteditable="false" data-mce-contenteditable="true">
<video src="/images/videos/2026/hacer-bobina-para potencia-clase-D.mp4#t=10" preload="metadata" controls style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
Tu navegador no soporta la etiqueta de video.
</video>
</div>Consejo extra de rendimiento: Añadir preload="metadata" le dice al navegador que solo descargue la información básica del video (duración y el fotograma inicial/elegido), lo que evita transferencias de datos innecesarias en tus servidores hasta que el usuario le dé clic.