How to show the video on a web page or website?

Whether you have website built in simple HTML or using CMS like WordPress, Magento, Joomla, Shopify, Webflow etc, you can embed video (locally hosted or externally hosted on Youtube, Vimeo etc) with simple HTML tags. Both of the methods for embedding videos on a web page are discussed in this article.

Embed Video using HTML <video> element

The HTML <video> element supports the video in MP4, WebM and Ogg formats. Below is the example code for showing your locally hosted video on your web page:

<video src="yourvideo.mp4"></video>

In the “src” attribute you have to enter the complete path to the video. You can enter the complete URL of the video as well like this:

<video src="https://yourdomain.com/wp-content/uploads/2021/2/yourvideo.mp4"></video>

The above code is actually useless. Guess why?

Because it will just display video without any controls or without a play button. So website visitors can not play this video on this page. If you want to Autoplay video then you can add the “autoplay” attribute in the video tag. Always remember that whenever you make video autoplay it should be muted because if it will not be muted then most of the browsers including chrome will not autoplay the video as it’s against the CORS policy to autoplay unmuted video.

<video src="https://yourdomain.com/wp-content/uploads/2021/2/yourvideo.mp4" autoplay muted></video>

Now if you want to enable full control panel for the video then you can enter “controls” attribute within the <video> tag.

<video src="https://yourdomain.com/wp-content/uploads/2021/2/yourvideo.mp4" autoplay muted controls></video>

Remember the video control panel will look different in different browsers according to the native styling of the browser for HTML videos. If you want to use the same style for all browsers then you will need to use a custom-built video player. If you are a WordPress user then you can use a plugin to embed video and style its control panel with some CSS code according to your requirements.

Another better way to embed video is to use source tag separately inside video tag.

<video autoplay muted controls>
  <source src="myvideo.mp4" type="video/mp4">

Your browser does not support the this video format.
</video>

Now if browser does not support the video tag it will display the message:

“Your browser does not support the this video format.”

Use <iframe> to show video on web page

Embedding videos as iframe embed is great and popular way to show videos on web page without hosting them on your server so page will remain light weight even after embedding video.

To embed video as iframe you can first upload video on a youtube or vimeo or any other video hosting platform. Once you have uploaded video you can copy the video id or directly copy the iframe code from share >>> Embed.

The iframe embed code from YouTube will look like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/SW55GCNHGo4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

You can just copy video ID as well and use it in the src attribute after the “/embed/” in the video url to point it to your video.

The simplest form of iframe embed code without defining extra parameters will be:

<iframe width="560" height="315" src="https://www.youtube.com/embed/SW55GCNHGo4" </iframe>

You can see the above code just has player dimesions and “src” attribute which is pointing to video URL.

You can define parameters according to your choice to mute video, autoplay, loop etc.

I hope you will find this article helpful if you are looking to add video to your web page.

If you have any questions, just let me know in the comment section. 🙂