Refactor YouTube shortcode

Includes the following changes:
 - Add support to retrieve the YouTube title from the video metadata
 - Adjusts autoplay configuration
 - Improve argument handling
This commit is contained in:
Mark Dumay
2024-08-11 12:05:48 +02:00
parent e99ac83fbc
commit fb20543d88
3 changed files with 67 additions and 20 deletions

View File

@@ -23,4 +23,12 @@ arguments:
type: bool
optional: true
default: false
comment: Flag indicating the video should start playing immediately when loaded.
comment: >-
Flag indicating the video should start playing immediately when loaded, if
supported by the browser. The audio will be muted.
autotitle:
type: bool
optional: true
default: false
comment: >-
Trigger to retrieve the title from the video metadata.

View File

@@ -466,3 +466,13 @@ As an example, the following shortcode displays a tooltip for a colored hyperlin
{{</* tooltip color="primary" title="Tooltip caption" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
{{< /example >}}
<!-- markdownlint-enable MD037 -->
## Youtube
As an example, the following shortcode displays a Hugo quickstart guide.
<!-- markdownlint-disable MD037 -->
{{< example lang="hugo" >}}
{{</* youtube id="w7Ft2ymGmfc" autoplay=true autotitle=true */>}}
{{< /example >}}
<!-- markdownlint-enable MD037 -->

View File

@@ -7,6 +7,8 @@
following modifications:
- Isolated the styles to comply with the Content Security Policy
- Added validation of shortcode arguments
- Added support to retrieve the title from the video metadata
- Adjusted autoplay configuration
- Modified the layout
The original source code is available on:
@@ -16,26 +18,53 @@
{{- $pc := .Page.Site.Config.Privacy.YouTube -}}
{{- if not $pc.Disable -}}
{{ $error := false }}
{{ $error := false }}
<!-- Validate arguments -->
{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "youtube" "args" .Params) }}
{{ errorf "Invalid arguments: %s" .Position -}}
{{ $error = true }}
{{ end }}
<!-- Validate arguments -->
{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "youtube" "args" .Params) }}
{{ errorf "Invalid arguments: %s" .Position -}}
{{ $error = true }}
{{ end }}
<!-- Initialize arguments -->
{{- $id := .Get "id" | default (.Get 0) -}}
{{- $class := .Get "class" | default (.Get 1) -}}
{{- $title := .Get "title" | default "YouTube Video" }}
{{- $autoplay := false }}
{{ with .Get "autoplay" }}{{ $autoplay = partial "utilities/CastBool.html" . }}{{ end -}}
{{- $host := cond $pc.PrivacyEnhanced "www.youtube-nocookie.com" "www.youtube.com" -}}
<!-- Initialize arguments -->
{{- $id := "" -}}
{{- $class := "" -}}
{{- $title := "YouTube Video" }}
{{- $autoplay := false }}
{{- $autotitle := false }}
{{- $host := cond $pc.PrivacyEnhanced "www.youtube-nocookie.com" "www.youtube.com" -}}
<!-- Main code -->
<div class="youtube-embedded {{ $class }}">
<iframe src="https://{{ $host }}/embed/{{ $id }}?origin={{ .Site.BaseURL }}{{ if $autoplay }}&autoplay=1{{ end }}"
allowfullscreen title="{{ $title }}">
{{- if .IsNamedParams }}
{{ with .Get "id" }}{{ $id = . }}{{ end }}
{{ with .Get "class" }}{{ $class = . }}{{ end }}
{{ with .Get "title" }}{{ $title = . }}{{ end }}
{{ if isset .Params "autoplay" }}{{ $autoplay = partial "utilities/CastBool.html" (.Get "autoplay") }}{{ end -}}
{{ if isset .Params "autotitle" }}{{ $autotitle = partial "utilities/CastBool.html" (.Get "autotitle") }}{{ end -}}
{{ else }}
{{- $id = .Get 0 -}}
{{- $class = .Get 1 -}}
{{ end }}
{{ $url := printf "https://%s/embed/%s?origin=%s" $host $id .Site.BaseURL }}
{{ $api := printf "https://www.youtube.com/oembed?format=json&url=%s" (printf "https://www.youtube.com/watch?v=%s" $id) }}
{{ if $autotitle }}
{{ with resources.GetRemote $api }}
{{ with .Err }}
{{ errorf "Unable to parse video metadata '%q': %s\n %s" $api .Position . }}
{{ else }}
{{ $data := . | transform.Unmarshal }}
{{ with $data.title }}{{ $title = . }}{{ end }}
{{ end }}
{{ else }}
{{ errorf "Unable to get video metadata '%q': %s" $api .Position }}
{{ end }}
{{ end }}
<!-- Main code -->
<div class="youtube-embedded {{ $class }}">
<iframe src="{{ $url }}{{ if $autoplay }}&autoplay=1&mute=1{{ end }}"
allowfullscreen title="{{ $title }}" {{ if $autoplay }}allow="autoplay"{{ end }}>
</iframe>
</div>
</div>
{{ end -}}