Embed html5 videos in blog posts

Philipp | Sep 25, 2022

Shortcode to embed videos in blog posts

I’ve written a little video shortcode to embed local videos in my blog posts.

I use the bootstrap class embed-responsive on the container and embed-responsive-item on the element. The w-100 class ensures, that the video has the same width as the text.

<div class="embed-responsive">
    <video class="embed-responsive-item w-100" {{ .Get 2 }} loop>
        <source src="{{ .Get 0 }}" type="{{ .Get 1 }}">
            Your browser does not support the video tag.
    </video> 
</div>

You use it like this:

  • string1: path to the video file in the static folder. e.g. “/exampleVideo.mp4”
  • string2: video format. e.g. “video/mp4”
  • string3: additional attibute. e.g. autoplay or controls
{{< video "string1" "string2" "string3" >}}