I want to show users a demo video of a feature. I want to embed a 1MB mp4 video of about 15 seconds.
I tried the following code, which has both autoplay, muted, and JS play command, but it does not work. if I don't have "controls" I see just the first frame, and if I do have, it doesn't play automatically. I just want to have it play in the background, as if it was some gif animation. Also, code is not responsive.
<div style="max-width: 640px; margin: 0 auto;">
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<video id="vid" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" loop autoplay muted controls>
<source src="demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<script>
document.getElementById('vid').play();
</script>