tpl/tplimpl: Fix full screen option in vimeo and youtube shortcodes

Closes #13531

Co-authored-by: Stefan Ritter <60473875+gideonstar-git@users.noreply.github.com>

Author: 2 people

tpl/tplimpl/embedded/templates/shortcodes/vimeo.html

@@ -4,10 +4,11 @@
 Accepts named or positional arguments. If positional, order is id, class,
 title, then loading.
 
-@param {string} [class] The class attribute of the wrapping div element. When specified, removes the style attributes from the iframe element and its wrapping div element.
 @param {string} [id] The video id. Optional if the id is provided as first positional argument.
+@param {string} [class] The class attribute of the wrapping div element. When specified, removes the style attributes from the iframe element and its wrapping div element.
 @param {string} [loading=eager] The loading attribute of the iframe element.
 @param {string} [title=Vimeo video] The title attribute of the iframe element.
+@param {bool} [allowFullScreen=true] Whether the iframe element can activate full screen mode.
 
 @returns {template.HTML}
 
@@ -19,11 +20,24 @@
   {{- if $pc.Simple }}
     {{- template "_internal/shortcodes/vimeo_simple.html" . }}
   {{- else }}
+    {{- $dnt := cond $pc.EnableDNT 1 0 }}
+
     {{- $id := or (.Get "id") (.Get 0) "" }}
     {{- $class := or (.Get "class") (.Get 1) "" }}
     {{- $title := or (.Get "title") (.Get 2) "Vimeo video" }}
     {{- $loading := or (.Get "loading") (.Get 3) "eager" }}
-    {{- $dnt := cond $pc.EnableDNT 1 0 }}
+    {{- $allowFullScreen := or (.Get "allowFullScreen") (.Get 4) true }}
+
+    {{- if in (slice "false" false 0) ($.Get "allowFullScreen") }}
+      {{- $allowFullScreen = false }}
+    {{- else if in (slice "true" true 1) ($.Get "allowFullScreen") }}
+      {{- $allowFullScreen = true }}
+    {{- end }}
+
+    {{- $iframeAllowList := "" }}
+    {{- if $allowFullScreen }}
+      {{- $iframeAllowList = "fullscreen" }}
+    {{- end }}
 
     {{- $divStyle := "position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;" }}
     {{- $iframeStyle := "position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" }}
@@ -36,11 +50,12 @@
         {{- else }}
           style="{{ $divStyle | safeCSS }}"
         {{- end }}>
-        <iframe webkitallowfullscreen mozallowfullscreen allowfullscreen
+        <iframe
           src="{{- $src }}"
           {{- if not $class }}
             style="{{ $iframeStyle | safeCSS }}"
           {{- end }}
+          {{- with $iframeAllowList }} allow="{{ . }}" {{- end }}
           {{- with $loading }} loading="{{ . }}" {{- end }}
           {{- with $title }} title="{{ . }}" {{- end }}>
         </iframe>

tpl/tplimpl/embedded/templates/shortcodes/youtube.html

@@ -27,7 +27,7 @@
   {{- with $id := or (.Get "id") (.Get 0) }}
 
     {{- /* Set defaults. */}}
-    {{- $allowFullScreen := "allowfullscreen" }}
+    {{- $allowFullScreen := true }}
     {{- $autoplay := 0 }}
     {{- $class := "" }}
     {{- $controls := 1 }}
@@ -37,12 +37,11 @@
     {{- $mute := 0 }}
     {{- $start := 0 }}
     {{- $title := "YouTube video" }}
+    {{- $iframeAllowList := "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" }}
 
     {{- /* Get arguments. */}}
-    {{- if in (slice "false" false 0) ($.Get "allowFullScreen") }}
-      {{- $allowFullScreen = "" }}
-    {{- else if in (slice "true" true 1) ($.Get "allowFullScreen") }}
-      {{- $allowFullScreen = "allowfullscreen" }}
+    {{- if in (slice "true" true 1) ($.Get "allowFullScreen") }}
+      {{- $iframeAllowList = printf "%s; fullscreen" $iframeAllowList }}
     {{- end }}
     {{- if in (slice "false" false 0) ($.Get "autoplay") }}
       {{- $autoplay = 0 }}
@@ -99,7 +98,6 @@
     {{- if $class }}
       {{- $iframeStyle = "" }}
     {{- end }}
-    {{- $allow := "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" }}
     {{- $referrerpolicy := "strict-origin-when-cross-origin" }}
 
     {{- /* Render. */ -}}
@@ -108,8 +106,7 @@
       {{- with $divStyle }} style="{{ . | safeCSS }}" {{- end -}}
     >
       <iframe
-        {{- with $allow }} allow="{{ . }}" {{- end }}
-        {{- with $allowFullScreen }} allowfullscreen="{{ . }}" {{- end }}
+        {{- with $iframeAllowList }} allow="{{ . }}" {{- end }}
         {{- with $loading }} loading="{{ . }}" {{- end }}
         {{- with $referrerpolicy }} referrerpolicy="{{ . }}" {{- end }}
         {{- with $src }} src="{{ . }}" {{- end }}

tpl/tplimpl/shortcodes_integration_test.go

@@ -464,26 +464,38 @@ func TestVimeoShortcode(t *testing.T) {
 
 	files := `
 -- hugo.toml --
-disableKinds = ['page','rss','section','sitemap','taxonomy','term']
+disableKinds = ['home','rss','section','sitemap','taxonomy','term']
 privacy.vimeo.simple = false
--- content/_index.md --
+-- content/p1.md --
 ---
-title: home
+title: p1
 ---
 {{< vimeo 55073825 >}}
--- layouts/index.html --
+-- content/p2.md --
+---
+title: p2
+---
+{{< vimeo id=55073825 allowFullScreen=true >}}
+-- content/p3.md --
+---
+title: p3
+---
+{{< vimeo id=55073825 allowFullScreen=false >}}
+-- layouts/_default/single.html --
 Hash: {{ .Content | hash.XxHash }}
 Content: {{ .Content }}
 `
 
 	// Regular mode
 	b := hugolib.Test(t, files)
-	b.AssertFileContent("public/index.html", "d1f592d2256ac3ff")
+	b.AssertFileContent("public/p1/index.html", "f7687b0c4e85b7d4")
+	b.AssertFileContent("public/p2/index.html", "f7687b0c4e85b7d4")
+	b.AssertFileContent("public/p3/index.html", "caca499bdc7f1e1e")
 
 	// Simple mode
 	files = strings.ReplaceAll(files, "privacy.vimeo.simple = false", "privacy.vimeo.simple = true")
 	b = hugolib.Test(t, files)
-	b.AssertFileContent("public/index.html", "c5bf16d87e2a370b")
+	b.AssertFileContent("public/p1/index.html", "c5bf16d87e2a370b")
 
 	// Simple mode with non-existent id
 	files = strings.ReplaceAll(files, "{{< vimeo 55073825 >}}", "{{< vimeo __id_does_not_exist__ >}}")
@@ -675,12 +687,12 @@ title: p2
 
 	b := hugolib.Test(t, files)
 
-	b.AssertFileContent("public/p1/index.html", "a0a6f5ade9cc3a9f")
+	b.AssertFileContent("public/p1/index.html", "5156322adda11844")
 	b.AssertFileContent("public/p2/index.html", "289c655e727e596c")
 
 	files = strings.ReplaceAll(files, "privacy.youtube.privacyEnhanced = false", "privacy.youtube.privacyEnhanced = true")
 
 	b = hugolib.Test(t, files)
-	b.AssertFileContent("public/p1/index.html", "b76d790c20d2bd04")
+	b.AssertFileContent("public/p1/index.html", "599174706edf963a")
 	b.AssertFileContent("public/p2/index.html", "a6db910a9cf54bc1")
 }