Supporting youtube/vimeo in templates

support
1

Hi,

I’m new to Hugo, so i’m not sure if doing it correct.
I’v setup a site and added a template.
Now i’m customizing the template and i would like to add an youtube/vimeo to a page.
A page a rendered form a data file (.yaml)
I’v seen some shortcodes but those are not working for templates.

So what is the normal way to do this?

  1. create pages (where shortcodes works ?) and link to a page from a template?
  2. add custom js to support youtube
  3. other… ?

Thanks for the help!

2

I am not sure about your specific situation (a page purely from a data yaml file, which might be the crux of the issue), but here is what I do.

  1. I have some conditional front-matter that sets a variable called include_video that I in turn use in my footer partial to selective include JS related to videos when needed: https://github.com/hnarayanan/harishnarayanan.org/blob/master/layout/partials/footer.html#L16

  2. I have a shortcode that looks like the following: https://github.com/hnarayanan/harishnarayanan.org/blob/master/layout/shortcodes/video.html and can be used like so in the content:

{{< video src="X0K37EQZ8f4" width="720" height="540" title="Simulated blood flow through the aneurysm." >}}
3

Hi there, thank for the information!

I just got it working like this :
I add field to my yaml data file

youtube: w7Ft2ymGmfc

then in my layout file

{{ if .youtube }} 
<iframe class="video" width="100%" height="400" src="http://www.youtube.com/embed/{{ .youtube }}" frameborder="0" allowfullscreen></iframe>
{{ end }}
2 Likes