mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-21 20:46:30 -05:00
tpl: Add title parameter to YouTube shortcode
This commit is contained in:
parent
0ad378b09c
commit
4fc918e02c
4 changed files with 19 additions and 6 deletions
|
@ -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:
|
||||
|
|
|
@ -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()
|
||||
|
|
8
tpl/tplimpl/embedded/templates.autogen.go
generated
8
tpl/tplimpl/embedded/templates.autogen.go
generated
|
@ -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 }}"/>
|
||||
|
|
|
@ -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 -}}
|
||||
|
|
Loading…
Reference in a new issue