Display fallback image even if the browser supports html5 video

Try this-

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

rather than creating a copy of the image.

poster may be what you're looking for:

Poster: A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame. -Via https://developer.mozilla.org/en-US/docs/HTML/Element/video

Example:

<video width="316" height="161" poster="https://i.stack.imgur.com/BfXRi.png" controls>
  <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
  <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  Your browser does not support the video tag.
</video>