swap movie for image in mobile with css

Is there a proper way to change from an mp4 movie on normal browsers to an image that renders in mobile browsers? The site loads extremely slow on mobile versions and I think it's because of the movie. So here's my issue.

The following code is in an html file:

<video id="video" width="427" height="366" autoplay loop />
  <source id='mp4'src="videos/Weight-Care-Patch-Movie.mp4" type='video/mp4'>
  <source id='webm' src="videos/Weight-Care-Patch-Movie.mp4" type='video/webm'>
  <source id='ogv' src="videos/Weight-Care-Patch-Movie.mp4" type='video/ogg'>
</video>

And I know using the:

@media (max-width: 800px)

I can get it to do something else, but the question is how can I get it to convert to say a background image - even though the html code has a video tag? What can I do to adjust it?

Any help is appreciated. Thank you.