What ever your reasons in wanting to do this, the HTML and CSS is fairly simply and can be fairly responsive when needed.
However on many mobile and hand-held platforms the auto-play is disabled, so the video will remain “paused” at the beginning when the document is loaded.
The only work around I’ve found is to use Java and force the video to play after a user interaction.
You’ll need 2 DIVs as shown in the diagram below.
- 1st DIV “videoDiv” is a container which will hold the display and set the height as required.
- 2nd DIV “videoMessage” will display all the foreground content such as text and images.
You can style the text as you want, place images, dynamic data or whatever you need in the 3rd DIV.
The video element does not display any controls and is set with a preload and autoplay.
You’ll want to use video formats that are compatible with as many browsers as needed, in the above demo I’ve used MP4 and WEBM.
We’ve updated the code with the following with “muted” and “playsinline”.
<video src="..." muted playsinline></video>
Muted apart from “muting” the volume, allows the video to autoplay on a Chrome browser after the user does a simply refresh, if muted is excluded the video is paused after the refresh.
Playsinline tells mobile browsers to play the video where it is coded to play and not open in to a fullscreen.
