How to put videos in the web
0.) Download and start Handbrake
Download Handbrake from the official source http://handbrake.fr and start it.
1.) open the source file
open the source file by clicking on "Source"

2.) select target file and directory
select target file and directory by clicking on "Browse"

3.) activate "Web Optimized"
select target file and directory by clicking on "Browse"

4.) change the resolution to 360p
In the "Picture"-Tab lower the "Width" as long as the second number in "Display Size" shows 360. Write down the resolution, because you will need it later.

5.) Decomb...
if your picture shows combing or mouse teeth (horizontal lines) try to set "Decomb" to "Bob" in the "Filters"-Tab

6.) Set H.264, 850 kbps, variable bit rate and 2-pass-encoding
In the "Video"-Tab set "Video Codec" to "H.264", activate "Variable Bitrate", set the "Average Bitrate (kbps)" to "850" and activate "2-Pass-Encoding".

7.) Set AAC, 128 kbps and Stereo
In the "Audio"-Tab set "Codec" to "AAC (faac)", "Bitrate" to "128" (kbps) and "Mixdown" to "Stereo".

8.) Start Re-Encoding
Click on "Start" to re-encode the video and wait...

10.) Check the video and make a Screenshot
Check the result video in VLC or a similar video player and make a screenshot of a significant part of the video by clicking on "Pause", "Video" and "Take a Screenshot".

11.) optimize the screenshot
optimize the screenshot as explained in the IT-Kraut How to put pictures in the web Guide.
12.) Upload the files
Upload the new video and the screenshot to the web server
13.) Insert the following HTML-Code in your website
Insert the following HTML-Code in your website and replace all underlined parts with the data of your actual video
<object type="application/x-shockwave-flash" data="http://www.womex.com/virtual/mediaplayer/mediaplayer.swf" width="640" height="379"> <!-- put here the video heigt + 19px for the controls in -->
<param name="codebase" value="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
<param name="movie" value="http://www.womex.com/virtual/mediaplayer/mediaplayer.swf" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent">
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="height=360&width=640&file=http://www.it-kraut.de/guide/video/womex_trailer_2014_web_640x360.mp4&displaywidth=640&displayheight=360&searchbar=false&usefullscreen=true&autostart=false&autoscroll=true&playlist=bottom&playlistsize=0&showicons=false&image=http://www.it-kraut.de/guide/video/womex_trailer_2014_web_640x360.jpg">
<video src="http://www.it-kraut.de/guide/video/womex_trailer_2014_web_640x360.mp4" width="640" height="320" controls>
(Please install the Flash-PlugIn)
</video>
</object>
More
You can find a very good guide for HTML 5 Video here: http://diveintohtml5.info/video.html.