shithub: hugo

Info  •  Files  •  Log  •  Branches

tpl: Add title parameter to YouTube shortcode

--- a/docs/content/en/content-management/shortcodes.md

+++ b/docs/content/en/content-management/shortcodes.md

@@ -398,6 +398,13 @@

 {{</* youtube id="w7Ft2ymGmfc" autoplay="true" */>}}

 {{< /code >}}

+For [accessibility reasons](https://dequeuniversity.com/tips/provide-iframe-titles), it's best to provide a title for your YouTube video.  You  can do this using the shortcode by providing a `title` parameter. If no title is provided, a default of "YouTube Video" will be used.

+

+{{< code file="example-youtube-input-with-title.md" >}}

+{{</* youtube id="w7Ft2ymGmfc" title="A New Hugo Site in Under Two Minutes" */>}}

+{{< /code >}}

+

+

 #### Example `youtube` Output

 Using the preceding `youtube` example, the following HTML will be added to your rendered website's markup:

--- a/hugolib/embedded_shortcodes_test.go

+++ b/hugolib/embedded_shortcodes_test.go

@@ -184,6 +184,11 @@

 			`{{< youtube id="w7Ft2ymGmfc" class="video" autoplay="true" >}}`,

 			"(?s)\n<div class=\"video\">.*?<iframe src=\"https://www.youtube.com/embed/w7Ft2ymGmfc\\?autoplay=1\".*?allowfullscreen title=\"YouTube Video\">.*?</iframe>.*?</div>",

 		},

+		// set custom title for accessability)

+		{

+			`{{< youtube id="w7Ft2ymGmfc" title="A New Hugo Site in Under Two Minutes" >}}`,

+			"(?s)\n<div style=\".*?\">.*?<iframe src=\"https://www.youtube.com/embed/w7Ft2ymGmfc\" style=\".*?\" allowfullscreen title=\"A New Hugo Site in Under Two Minutes\">.*?</iframe>.*?</div>",

+		},

 	} {

 		var (

 			cfg, fs = newTestCfg()

--- a/tpl/tplimpl/embedded/templates.autogen.go

+++ b/tpl/tplimpl/embedded/templates.autogen.go

@@ -531,12 +531,12 @@

 {{- 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) }}

+{{- $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="YouTube Video"></iframe>

+  <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 -}}

-`},

+{{ end -}}`},

 	{`twitter_cards.html`, `{{- with $.Params.images -}}

 <meta name="twitter:card" content="summary_large_image"/>

 <meta name="twitter:image" content="{{ index . 0 | absURL }}"/>

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

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

@@ -2,8 +2,9 @@

 {{- 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) }}

+{{- $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="YouTube Video"></iframe>

+  <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 -}}