Esto puede sonar extraño, pero ¿puedo mostrar una imagen alternativa en ese caso?

Dado que los elementos de video en dispositivos móviles (Android e iOS) abrirán su aplicación de reproductor de video nativa cuando se haga clic en ellos, quiero mostrar la versión GIF del video (que colocaré como imagen alternativa) para Android e iOS. Sé cómo detectar si el navegador es móvil o no a través de Javascript, solo necesito algunos consejos sobre las mejores prácticas.

Que estoy haciendo

<video>
    <source mp4>
    <source ogg>
    <source webm>
    <img src="*.gif">
</video>

Luego en el js

if(site.isMobile()){
    $('video').hide();
    $('video img').show();
}

Por supuesto que no funciona ya que el img está dentro del video. Me imagino que puedo clonar el img y añadirlo antes del elemento de video y luego ocultar el elemento de video, algo como esto:

if(site.isMobile()){
    $('video img').clone().prependTo('video'); // just some pseudocode
    $('video').hide();
}

¿Aunque es una buena práctica? ¿Hay alguna solución más simple?