Using background videos on websites has become quite common nowadays. I recently discovered the capabilities available within the Azure Storage Account, and I’ve come to realize that embedding a background video on a website through a Storage Account is a straightforward process.

To get started, you should create a container within your Azure Storage Account. After creating the container, set the public access level option to “Blob (anonymous read access for blob only).” This configuration will allow you to make the video content accessible for embedding on your website.

After uploading the video you intend to use, navigate to the properties of the uploaded video file within your Azure Storage Account. From there, you can obtain the video URL, which will be inserted into your website’s code to embed the background video.

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 have observed a slight delay at the start of a large video before it begins playing. This delay occurs because Azure Blob Storage does not support streaming; instead, it uses progressive download. In progressive download, there is a brief period during which a substantial amount of data is downloaded before playback commences.