Adding classes to YouTube shortcode

support
1

I read through this: https://gohugo.io/content-management/shortcodes/#youtube. My question is, is it possible to add classes? Currently I’m targeting the iframe but this seems like a bad idea.

Thank you.

2

Here’s the source for the built-in YouTube shortcode:
https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/youtube.html

{{- $pc := .Page.Site.Config.Privacy.YouTube -}}
{{- if not $pc.Disable -}}
{{- $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" -}}
{{- $id := .Get "id" | default (.Get 0) -}}
{{- $class := .Get "class" | default (.Get 1) }}
<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
  <iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="YouTube Video"></iframe>
</div>
{{ end -}}

You can see that it accepts 1, 2, or 3 parameters. The first, which is either named (id) or positional, is the YouTube ID. The second, which is either named (class) or positional, is the CSS class assigned to the surrounding <div>. The third, a named parameter (autoplay), is the autoplay option.

These are equivalent:

{{< youtube w7Ft2ymGmfc my-css-class >}}
{{< youtube "w7Ft2ymGmfc" "my-css-class" >}}
{{< youtube id="w7Ft2ymGmfc" class="my-css-class" >}}
{{< youtube class="my-css-class" id="w7Ft2ymGmfc" >}}

Note that you cannot mix named and positional parameters. For example, this will throw an error:

{{< youtube w7Ft2ymGmfc my-css-class autoplay="true" >}}