How to embed a YouTube playlist in hugo website

Question

I can make use of the following code, {{< youtube hvWSg6NblSU >}} to embed the YouTube video in hugo website, where hvWSg6NblSU is the value in following url: https://www.youtube.com/watch?v=hvWSg6NblSU

Instead of embedding a single video, I want to embed the following playlist: https://www.youtube.com/playlist?list=PLDe3_HhjV1foHQbtGpdo0FSmsMrVykuKJ

Question: Is there a way I can embed the above playlist. Basically I am trying to make a page using hugo which will show the playlist on YouTube.

In the following link: https://naresh-chaurasia.github.io/talk2naresh/course/python-kids/, I have a single YouTube video but want to add link to entire playlist using hugo. Is it possible.

Although I can create a hyperlink to the playlist, but I want to display the YouTube playlist.

Thanks.

Answer 1

It is not supported by the built-in youtube shortcode.

What you can do is create a new youtube shortcode for playlists.

Steps

1. Create: /layouts/shortcodes/youtubepl.html
2. In that file place the following: (based on the built-in youtube shortcode)

{{- $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) -}}
{{- $title := .Get "title" | default "YouTube Video" }}
<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
  <iframe src="https://{{ $ytHost }}/embed/videoseries?list={{ $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="{{ $title }}"></iframe>
</div>
{{ end -}}

(aside: If you prefer to have a different shortcode name, simply change the filename. For example, if you prefer to use {{< ytplaylist >}} change the shortcode filename to ytplaylist.html.)

Usage

• Usage is the same as the built-in {{< youtube >}} shortcode, just use the new shortcode name like so: {{< youtubepl id="ID-HERE" >}} or {{< youtubepl ID-HERE >}}.
• Instead of the video ID, you'll use the playlist ID.