How to add a video to a Hugo post


I want to add a video to a Hugo blog post. The video is hosted on my website, so it is not a Youtube or Vimeo.


Setup a raw HTML shortcode

The posts in Hugo are written using Markdown syntax. To have raw HTML code included, create shortcodes folder in your Hugo website directory as


create a file, rawhtml.html with the content

<!-- raw html -->

Now, in any post we can insert the desired HTML code using the below code:

{{< rawhtml >}}    
    <!-- html codes here-->  
{{< /rawhtml >}}

Add Video

The video files are placed in the path /your-website/static/videos.

To embed a video, the video tag is used:

{{< rawhtml >}} 

<video width=100% controls autoplay>
    <source src="/videos/table_of_contents.webm" type="video/webm">
    Your browser does not support the video tag.  

{{< /rawhtml >}}

controls gives video play, pause, full-screen controls and autoplay plays the video automatically when the page is loaded. The video type can be video/mp4, video/webm, or video/ogg depending on the format of the file.


I got ideas and codes from the below website(s)

Raw html


I notify you of my new posts

Latest Posts


0 comment