Using background videos on websites is something quite common now days. Recently I discovered the available capabilities which exist on the Azure Storage Account and I realized, it is quite simple to embed background video on a website via Storage Account.

First create a Container in the Storage Account on Azure. Then, select for option public access level the choice “Blob (anonymous read access for blob only)”.

Upload the video you want to use, and then select from properties the video url you will add to the code.

Then add the following section to the html file. In the source field add the url from the Storage Account.

<section id="myVideo">
  <div>
   <video autoplay muted loop poster="img/sections/bg/1900x700_Video.jpg">
    <source src="https://irisassistantvideo.blob.core.windows.net/backgroundvideo/video.mp4"  type='video/mp4; codecs="avc1.42e01e, mp4a.40.2">
   </video>
  <div>
</section>

You may notice in a big video a little delay in the beginning until the video is played. This is created as Azure Blob Storage does not support streaming but progressive download. With progressive download, it takes a little time to download a significant amount of data before it starts.