In a recent project my designer told me: "Ok, we need a video in the background and some text in the foreground.". My first thoughts were "easy as pie".

So I organized the video and the corresponding license and began to implement the solution. After some minutes of coding I checked the result. Typically I am developing on my desktop and I am using Firefox and Chrome. So everything worked and I was almost happy. Now I had to check if it is also working on the mobile devices. The iPad showed the video, but all my Android-devices did not follow this ideal. After some investigation on the web there was a possible solution. Due to mobile data most of the mobiles browsers do not start embedded videos. All the people stated that we can solve this problem with only two lines of code.

<script>
    var video = document.getElementById('myvideo');
    video.play();
</script>

This did the trick for the mobile version of Firefox. But my Google Chrome still did not show the video. With the possibilities of remote debugging I had the chance to check if the video element is there and if there is an error when the site has been loaded. My only problem was that the element has been where it had to be and there was no error-message. After some time I found an interesting statement on a website of Google. It said that the autoplay-feature will not work if the video is unmuted! So I tried it and added a simple "muted" to the videoelement. ==> It works and I am happy as a sandboy!

<video autoplay muted>
  YOUR SOURCES!
</video>