forked from gohugoio/hugo
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
tpl/tplimpl: Improve youtube shortcode
Changes: - Add query string params for controls, loop, mute, start, and end - Add iframe loading attribute - Obtain default iframe title from YouTube oEmbed API - Fix autoplay feature - Improve readability Closes gohugoio#3694 Closes gohugoio#9213 Closes gohugoio#10520 Closes gohugoio#10575 Closes gohugoio#10576 Co-authored-by: sgharms <sgharms@stevengharms.com>
- Loading branch information
Showing
1 changed file
with
148 additions
and
10 deletions.
There are no files selected for viewing
158 changes: 148 additions & 10 deletions
158
tpl/tplimpl/embedded/templates/shortcodes/youtube.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,148 @@ | ||
{{- $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/{{ $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 -}} | ||
{{- /* | ||
Renders an embedded YouTube video. | ||
|
||
@param {bool} [allowFullScreen=true] Whether the iframe can activate full screen mode. | ||
@param {bool} [autoplay=false] Whether to automatically play the video. Forces mute to be true. | ||
@param {string} [class] The class or classes to apply to the wrapping div element. | ||
@param {bool} [controls=true] Whether to display the video controls. | ||
@param {int} [end] The time, measured in seconds from the start of the video, when the player should stop playing the video. | ||
@param {string} [id] The video id. Optional if the id is provided as first positional argument. | ||
@param {string} [loading=eager] The loading attribute of the iframe element. | ||
@param {bool} [loop=false] Whether to indefinitely repeat the video. | ||
@param {bool} [mute=false] Whether to mute the video. Always true when autoplay is enabled. | ||
@param {int} [start] The time, measured in seconds from the start of the video, when the player should start playing the video. | ||
@param {string} [title] The title attribute of the iframe element. Defaults to the title returned by YouTube oEmbed API. | ||
|
||
@returns {template.HTML} | ||
|
||
@reference https://developers.google.com/youtube/player_parameters | ||
|
||
@example {{< youtube 0RKpf3rK57I >}} | ||
@example {{< youtube id=0RKpf3rK57I loading=lazy start=30 >}} | ||
*/}} | ||
|
||
{{- $pc := .Page.Site.Config.Privacy.YouTube }} | ||
{{- if not $pc.Disable }} | ||
{{- with $id := or (.Get "id") (.Get 0) }} | ||
|
||
{{- /* Get data from the YouTube oEmbed API. */}} | ||
{{- $q := querify "url" (printf "https://www.youtube.com/watch?v=%s" $id) "format" "json" }} | ||
{{- $url := printf "https://www.youtube.com/oembed?%s" $q }} | ||
{{- $data := dict }} | ||
{{- with resources.GetRemote $url }} | ||
{{- with .Err }} | ||
{{- errorf "The %q shortcode was unable to get remote resource %q. %s. See %s" $.Name $url . $.Position }} | ||
{{- else }} | ||
{{- $data = .Content | transform.Unmarshal }} | ||
{{- end }} | ||
{{- else }} | ||
{{- errorf "The %q shortcode was unable to get remote resource %q. See %s" $.Name $url $.Position }} | ||
{{- end }} | ||
|
||
{{/* Set defaults. */}} | ||
{{- $allowFullScreen := "allowfullscreen" }} | ||
{{- $autoplay := 0 }} | ||
{{- $class := "" }} | ||
{{- $controls := 1 }} | ||
{{- $end := 0 }} | ||
{{- $loading := "eager" }} | ||
{{- $loop := 0 }} | ||
{{- $mute := 0 }} | ||
{{- $start := 0 }} | ||
{{- $title := $data.title }} | ||
|
||
{{- /* Get arguments. */}} | ||
{{- if in (slice "false" false 0) ($.Get "allowFullScreen") }} | ||
{{- $allowFullScreen = "" }} | ||
{{- else if in (slice "true" true 1) ($.Get "allowFullScreen") }} | ||
{{- $allowFullScreen = "allowfullscreen" }} | ||
{{- end }} | ||
{{- if in (slice "false" false 0) ($.Get "autoplay") }} | ||
{{- $autoplay = 0 }} | ||
{{- else if in (slice "true" true 1) ($.Get "autoplay") }} | ||
{{- $autoplay = 1 }} | ||
{{- end }} | ||
{{- if in (slice "false" false 0) ($.Get "controls") }} | ||
{{- $controls = 0 }} | ||
{{- else if in (slice "true" true 1) ($.Get "controls") }} | ||
{{- $controls = 1 }} | ||
{{- end }} | ||
{{- if in (slice "false" false 0) ($.Get "loop") }} | ||
{{- $loop = 0 }} | ||
{{- else if in (slice "true" true 1) ($.Get "loop") }} | ||
{{- $loop = 1 }} | ||
{{- end }} | ||
{{- if in (slice "false" false 0) ($.Get "mute") }} | ||
{{- $mute = 0 }} | ||
{{- else if or (in (slice "true" true 1) ($.Get "mute")) $autoplay }} | ||
{{- $mute = 1 }} | ||
{{- end }} | ||
{{- $class := or ($.Get "class") $class }} | ||
{{- $end := or ($.Get "end") $end }} | ||
{{- $loading := or ($.Get "loading") $loading }} | ||
{{- $start := or ($.Get "start") $start }} | ||
{{- $title := or ($.Get "title") $title }} | ||
|
||
{{- /* Determine host. */}} | ||
{{- $host := cond $pc.PrivacyEnhanced "www.youtube-nocookie.com" "www.youtube.com" }} | ||
|
||
{{- /* Set styles. */}} | ||
{{- $divStyle := "position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;" }} | ||
{{- $iframeStyle := "position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" }} | ||
{{- if $class }} | ||
{{- $iframeStyle = "" }} | ||
{{- end }} | ||
|
||
{{- /* Set class or style of wrapping div element. */}} | ||
{{- $divClassOrStyle := printf "style=%q" $divStyle }} | ||
{{- with $class }} | ||
{{- $divClassOrStyle = printf "class=%q" $class }} | ||
{{- end }} | ||
|
||
{{- /* Define src attribute. */}} | ||
{{- $src := printf "https://%s/embed/%s" $host $id }} | ||
{{- $params := dict | ||
"autoplay" $autoplay | ||
"controls" $controls | ||
"end" $end | ||
"mute" $mute | ||
"start" $start | ||
"loop" $loop | ||
}} | ||
{{- if $loop }} | ||
{{- $params = merge $params (dict "playlist" $id) }} | ||
{{- end }} | ||
{{- $s := slice }} | ||
{{- range $k, $v := $params }} | ||
{{- $s = $s | append $k }} | ||
{{- $s = $s | append $v }} | ||
{{- end }} | ||
{{- with querify $s }} | ||
{{- $src = printf "%s?%s" $src . }} | ||
{{- end }} | ||
|
||
{{- /* Set iframe attributes. */}} | ||
{{- $iframeAttributes := dict | ||
"allow" "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | ||
"allowfullscreen" $allowFullScreen | ||
"loading" $loading | ||
"referrerpolicy" "strict-origin-when-cross-origin" | ||
"src" $src | ||
"style" $iframeStyle | ||
"title" $title | ||
}} | ||
|
||
{{- /* Render. */}} | ||
<div {{ $divClassOrStyle | safeHTMLAttr }}> | ||
<iframe | ||
{{- range $k, $v := $iframeAttributes }} | ||
{{- if $v }} | ||
{{- printf " %s=%q" $k $v | safeHTMLAttr }} | ||
{{- end }} | ||
{{- end }} | ||
></iframe> | ||
</div> | ||
{{- else }} | ||
{{- errorf "The %q shortcode requires an id argument. See %s" .Name .Position }} | ||
{{- end }} | ||
{{- end }} |