diff options
author | Andrew Zenk <andrew@andrewzenk.com> | 2020-12-02 05:53:53 -0600 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-12-02 12:53:53 +0100 |
commit | 4fc918e02cfc7f260d6312248ff9d33e95b27943 (patch) | |
tree | 64621d7e7e447b644c8456503e0648e6e8ed9a0e | |
parent | 0ad378b09cea90a2a70d7ff06af668abe22475a1 (diff) |
tpl: Add title parameter to YouTube shortcode
-rw-r--r-- | docs/content/en/content-management/shortcodes.md | 7 | ||||
-rw-r--r-- | hugolib/embedded_shortcodes_test.go | 5 | ||||
-rw-r--r-- | tpl/tplimpl/embedded/templates.autogen.go | 8 | ||||
-rw-r--r-- | tpl/tplimpl/embedded/templates/shortcodes/youtube.html | 5 |
4 files changed, 19 insertions, 6 deletions
diff --git a/docs/content/en/content-management/shortcodes.md b/docs/content/en/content-management/shortcodes.md index a298bc425..2b4d0d632 100644 --- a/docs/content/en/content-management/shortcodes.md +++ b/docs/content/en/content-management/shortcodes.md @@ -398,6 +398,13 @@ Furthermore, you can automatically start playback of the embedded video by setti {{</* 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: diff --git a/hugolib/embedded_shortcodes_test.go b/hugolib/embedded_shortcodes_test.go index a998b85b7..b8acb2d80 100644 --- a/hugolib/embedded_shortcodes_test.go +++ b/hugolib/embedded_shortcodes_test.go @@ -184,6 +184,11 @@ func TestShortcodeYoutube(t *testing.T) { `{{< 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() diff --git a/tpl/tplimpl/embedded/templates.autogen.go b/tpl/tplimpl/embedded/templates.autogen.go index 1bed51420..3af86cb6c 100644 --- a/tpl/tplimpl/embedded/templates.autogen.go +++ b/tpl/tplimpl/embedded/templates.autogen.go @@ -531,12 +531,12 @@ if (!doNotTrack) { {{- 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 }}"/> diff --git a/tpl/tplimpl/embedded/templates/shortcodes/youtube.html b/tpl/tplimpl/embedded/templates/shortcodes/youtube.html index 9e8477659..93fed2326 100644 --- 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 -}} |