3

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.

Naresh Chaurasia
  • 419
  • 5
  • 21

1 Answers1

5

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.
I'M YourOnly.One
  • 398
  • 2
  • 8
  • I have checked in the code here: https://github.com/Naresh-Chaurasia/nareshchaurasia-talk2naresh-code-git. As per above, I have added `youtubepl.html` in location `layouts\shortcodes` and `themes\hugo-theme-relearn\layouts\shortcodes`. I have also created content\basics\poc.md using `{{< youtubepl id="PLDe3_HhjV1foHQbtGpdo0FSmsMrVykuKJ" >}}`, but it is not working. Am I doing something wrong, since this code is not working. – Naresh Chaurasia May 01 '22 at 16:28
  • Hi, I checked your git repo but the youtubepl shortcode file is empty. In any case, I pulled your repo and tested on my end; with the above code, it appears to be working, see screenshot: https://pasteboard.co/ndhNxu8t2leN.png. The code in poc.md is also correct. – I'M YourOnly.One May 02 '22 at 20:48
  • Thanks. It is working fine for me now. I forgot to checkin the code in git. I made changes suggested by you and it works fine. – Naresh Chaurasia May 03 '22 at 07:36