[SOLVED] Video.js shortcode

support
1

I’m trying to create a video.js shortcode. I need to do two things:

I need to add the following into the <head> section:

<link href="https://vjs.zencdn.net/7.0.5/video-js.css" rel="stylesheet">

and I need a shortcode that generates this kind of text:

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="MY_VIDEO.mp4" type='video/mp4'>
  <source src="MY_VIDEO.webm" type='video/webm'>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

<script src="https://vjs.zencdn.net/7.0.5/video.js"></script>

ideally, the <head> section text will only get added for posts that use the video.js shortcode. I feel confident that I can create the main template, but the <head> text eludes me.

Thanks.

2

You could add a frontmatter param to your post e.g.

hasvideojs = true

then in your head something like

{{ with .Params.hasvideojs }}
  {{ if . }}
    <link href ...
  {{ end }}
{{ end }}
3

Something like:

{{ with .HasShortcode "videojs" }}
<link href="https://vjs.zencdn.net/7.0.5/video-js.css" rel="stylesheet">
{{ end }}

For reference, see: https://gohugo.io/templates/shortcode-templates/#checking-for-existence

4

thanks!

5

Do you have this shortcode? I wasted so much time trying to create my own, and it didn’t working completely. There is a theme that has this code, but it doesn’t work when i’m importing it to separate module GitHub - laozhu/hugo-nuo: 🎨 A responsive light & clean hugo theme for blogger.