Это может звучать странно, но могу ли я в этом случае отображать запасное изображение?

Поскольку элементы видео в мобильном устройстве (Android и iOS) при нажатии будут открывать собственное приложение видеопроигрывателя, я хочу показать GIF-версию видео (которое я добавлю в качестве запасного изображения) для Android и iOS. Я знаю, как определить, является ли браузер мобильным или нет с помощью Javascript, мне просто нужен совет по наилучшей практике.

Что я делаю

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

Тогда в JS

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

Конечно, это не работает, так как img находится внутри видео. Я полагаю, что могу клонировать img и добавить его перед элементом video, а затем скрыть элемент video, что-то вроде этого:

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

Это хорошая практика, хотя? Есть ли более простое решение?