Może to brzmieć dziwnie, ale czy w tym przypadku mogę nadal wyświetlać obraz awaryjny?

Ponieważ elementy wideo w telefonie komórkowym (Android i iOS) otworzą swoją natywną aplikację odtwarzacza wideo po kliknięciu, chcę pokazać wersję wideo GIF (którą umieszczę jako obraz rezerwowy) dla Androida i iOS. Wiem, jak wykryć, czy przeglądarka jest mobilna, czy nie, za pomocą Javascript. Potrzebuję tylko porady na temat najlepszych praktyk.

Co ja robię

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

Potem w js

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

Oczywiście nie działa, ponieważ img jest wewnątrz wideo. Myślę, że mogę sklonować img i dodać go przed elementem wideo, a następnie ukryć element wideo, coś w tym stylu:

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

Czy to dobra praktyka? Czy jest jakieś prostsze rozwiązanie?