How to Add Videos in Html?

Web developers have a very common doubt about how to add videos in HTML code to increase the content quality. Videos are a good digital marketing strategy because users find it very entertaining and engaging. Here in this article, we will tell you ways to do it efficiently.

There are 3 methods to add videos to your HTML code:

  1. Video sharing site

In case you are finding it difficult to add video to your website, you can host it onto another video platform like YouTube and get its embedded code. You can insert this code to your already existing HTML code. This way you will save a lot of bandwidth space allocated to the website and users can stream it seamlessly without any speed disturbances.

One disadvantage you may face is that the video will be out of your control. Depending on the site you choose to upload it onto, it may add on many advertisements, reduce its quality, length, size etc. Also, it harms its originality because the same video will be present on different sites. However, you can certainly choose this option depending on your purpose and intention of making the video.

  1. Third-party Video Script

Another alternative is to use a video player script available. This method has a big advantage wherein the user can still play your video even if they use an older browser and don’t have HTML5 video playing feature. However, Adobe might stop providing the Flash facility soon, due to which this will be no longer useful.

  1. Using the <Video> Tag

You can use the code below to add a video in HTML

<video src=”demo.webm” poster=”initial_static_picture.jpg” width=”480″ controls>


The ‘controls’ attribute allows to add buttons of stop, play, pause a video. The exact type and number of controls it adds depends on the browser.

The width attribute indicates the width of the player in pixels.

Other attributes which you can include are:

Loop: causes the video to return to the beginning when it has ended.

  • Muted: It will mute the video by default.
  • Auto-play: This option automatically plays the video without the user’s permission i.e., user doesn’t have to click on the play button to play it. This attribute can be used when users visit a site solely for the purpose of watching a video.
  • Preload: this attribute indicates the browser about how much of it has to be loaded in advance before user-interaction starts.

Allowed values for preload include:

None: preload nothing

Metadata: preload only metadata

Auto: the browser can preload any portion – even the entire video.

The default value is different for different browsers.

Hopefully, you now know how to add videos through your HTML code. The above methods are simple and can be executed easily. Make sure that videos contain really good content and only what is relevant to the audience because unnecessary or unimportant ones may drive the user away from your site and you may experience less user traffic. Thanks for reading our blog and stay tuned for more ‘how to’ topics!


Your email address will not be published. Required fields are marked *

I Like to Write and Read about Technology, Business and Marketing at Chung Cu Butterfly. I have updated and published a lot of quality content on this website, do check them out and let us know in the comments.