The idea of embed videos in your website seems so engaging right? You can embed any type of video you want whether it is a how-to tutorial, a product demo, or just a random entertaining video to make your web content interactive. And because of HTML's <video> tag you can do this easily. So, in this blog post, I'll tell you how to correctly use <video> tag to boost your website's traffic.

 

Understanding the <video> Tag

<video> tag is the most popular and widely used html tag for embedding videos. Using this tag not only you just embed videos but also can adjust its controls like play, pause and volume up/down. This flexible and versatile tag also support the following attributes to tackle the behaviour of how the video works.

• Controls: This attributes shows the general controls like play, pause and volume on video.
• Autoplay: This attribute automatically plays the video whenever you load the webpage.
• Loop: And this attribute plays the video repeatedly.

Step-by-Step: Embedding a Video

1# Write the Basic Structure

First let's make a basic HTML layout for embedding video. The <video> tag will hold the video and <source> tag will define the context and type of video.

<video controls>
   <source src="video.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>

Controls attribute will display the video controls, like play, pause etc.

2# Add Attributes

Now we'll define the size and behaviour of video by adding attributes like width and height. 

<video controls width="600" height="400">
   <source src="video.mp4" type="video/mp4">
</video

3# Insert Multiple Video Formats

The most important thing if you want to make your video compatible with multiple browsers, you must add multiple formats of the same video. For this you can use multiple <source> tags, one tag for one format.

<video controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.webm" type="video/webm">
   Your browser does not support the video tag.
</video>

4# Fallback Content

The last step is, it may be possible that <video> tag is not supported by every browser, like if its working on Google, there are chances that Yahoo denies to support. So, for this case you can add Fallback content within opening and closing <video> tags to let users know the reason why their video is not playing.

<video controls>
   <source src="video.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>

Customizing Video Appearance and Behavior

In the above you've learned the basic structure for embedding video on website, but what about some designing with CSS. For example, in this project you can use the CSS for rounding the corners of embedded video.

video {
   border-radius: 10px;
   box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

Conclusion

So, at the end of this post, hope you've known that HTML's <video> tag is used for not only embedding videos on your website, but is also customizable. By implementing this tag and adding video content you can boost your site's traffic. Now it is your turn to do the magic!