Add paige/youtube.html shortcode
This commit is contained in:
46
README.md
46
README.md
@@ -639,6 +639,52 @@ Parameters:
|
||||
|
||||
It has the other parameters of the `paige/figure` shortcode.
|
||||
|
||||
### YouTube
|
||||
|
||||
The `paige/youtube` shortcode provides a responsive YouTube video.
|
||||
|
||||
```
|
||||
{{< paige/youtube
|
||||
autoplay=false
|
||||
controls=true
|
||||
end=20
|
||||
fullscreen=true
|
||||
list=PL2WkvfelorAFjpzGUWc4OWAWmiJpwL97L
|
||||
loop=true
|
||||
mute=true
|
||||
start=10
|
||||
title="My title"
|
||||
video="dQw4w9WgXcQ"
|
||||
>}}
|
||||
```
|
||||
|
||||
Inner content: None.
|
||||
|
||||
Parameters:
|
||||
|
||||
<dl>
|
||||
<dt><code>autoplay</code></dt>
|
||||
<dd>Optional. Boolean. Automatically play the video.</dd>
|
||||
<dt><code>controls</code></dt>
|
||||
<dd>Optional. Boolean. Show video controls. Default is <code>true</code>.</dd>
|
||||
<dt><code>end</code></dt>
|
||||
<dd>Optional. Integer. Elapsed seconds. Stop the video here.</dd>
|
||||
<dt><code>fullscreen</code></dt>
|
||||
<dd>Optional. Boolean. Enable full screen. Default is <code>true</code>.</dd>
|
||||
<dt><code>list</code></dt>
|
||||
<dd>Optional. String. Playlist ID.</dd>
|
||||
<dt><code>loop</code></dt>
|
||||
<dd>Optional. Boolean. Loop the video.</dd>
|
||||
<dt><code>mute</code></dt>
|
||||
<dd>Optional. Boolean. Mute the video.</dd>
|
||||
<dt><code>start</code></dt>
|
||||
<dd>Optional. Integer. Elapsed seconds. Start the video here.</dd>
|
||||
<dt><code>title</code></dt>
|
||||
<dd>Optional. String. Video description. Used for screen readers. Default is <code>YouTube video</code>.</dd>
|
||||
<dt><code>video</code></dt>
|
||||
<dd>Optional. Position 0. String. Video ID.</dd>
|
||||
</dl>
|
||||
|
||||
## Customize
|
||||
|
||||
If `partials/paige/head-last.html` exists in the site, it is included at the end of the head tag.
|
||||
|
59
exampleSite/content/blog/youtube.md
Normal file
59
exampleSite/content/blog/youtube.md
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
categories: [paige]
|
||||
date: 2023-01-20
|
||||
description: Demonstration of the Paige YouTube shortcode.
|
||||
tags: [shortcodes, videos]
|
||||
title: YouTube Shortcode
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/youtube "dQw4w9WgXcQ" */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/youtube "dQw4w9WgXcQ" >}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/youtube video="dQw4w9WgXcQ" */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/youtube video="dQw4w9WgXcQ" >}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/youtube
|
||||
controls=true
|
||||
end=20
|
||||
fullscreen=true
|
||||
loop=true
|
||||
mute=true
|
||||
start=10
|
||||
title="My title"
|
||||
video="dQw4w9WgXcQ"
|
||||
*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/youtube
|
||||
controls=true
|
||||
end=20
|
||||
fullscreen=true
|
||||
loop=true
|
||||
mute=true
|
||||
start=10
|
||||
title="My title"
|
||||
video="dQw4w9WgXcQ"
|
||||
>}}
|
62
layouts/shortcodes/paige/youtube.html
Normal file
62
layouts/shortcodes/paige/youtube.html
Normal file
@@ -0,0 +1,62 @@
|
||||
{{ $autoplay := .Get "autoplay" }}
|
||||
{{ $controls := .Get "controls" | default true }}
|
||||
{{ $end := .Get "end" }}
|
||||
{{ $fullscreen := .Get "fullscreen" | default true }}
|
||||
{{ $list := .Get "list" }}
|
||||
{{ $loop := .Get "loop" }}
|
||||
{{ $mute := .Get "mute" }}
|
||||
{{ $start := .Get "start" }}
|
||||
{{ $title := .Get "title" | default "YouTube video" }}
|
||||
{{ $video := .Get 0 | default (.Get "video") | default "dQw4w9WgXcQ" }}
|
||||
|
||||
{{ $host := cond .Page.Site.Config.Privacy.YouTube.PrivacyEnhanced "www.youtube-nocookie.com" "www.youtube.com" }}
|
||||
|
||||
{{ $path := "" }}
|
||||
|
||||
{{ if $list }}
|
||||
{{ $path = printf "embed?list=%v&listtype=playlist" $list }}
|
||||
{{ else }}
|
||||
{{ $path = printf "embed/%v" $video }}
|
||||
{{ end }}
|
||||
|
||||
{{ $params := slice (printf "hl=es" (.Site.LanguageCode | default .Site.Language.Lang)) "modestbranding=1" }}
|
||||
|
||||
{{ if $autoplay }}
|
||||
{{ $params = $params | append "autoplay=1" | append "mute=1" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if not $controls }}
|
||||
{{ $params = $params | append "controls=0" }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $end }}
|
||||
{{ $params = $params | append (printf "end=%v" .) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if not $fullscreen }}
|
||||
{{ $params = $params | append "fs=0" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $loop }}
|
||||
{{ $params = $params | append "loop=1" }}
|
||||
|
||||
{{ if $video }}
|
||||
{{ $params = $params | append (printf "playlist=%v" $video) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $mute }}
|
||||
{{ $params = $params | append "mute=1" }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $start }}
|
||||
{{ $params = $params | append (printf "start=%v" .) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $params }}
|
||||
{{ $params = delimit (uniq (sort $params)) "&" }}
|
||||
{{ end }}
|
||||
|
||||
<div class="mb-3 ratio ratio-16x9">
|
||||
<iframe src="https://{{ $host | safeURL }}/{{ $path | safeURL }}?{{ $params | safeURL }}" {{ with $title }} title="{{ . }}" {{ end }} {{ if $fullscreen }} allowfullscreen {{ end }}></iframe>
|
||||
</div>
|
Reference in New Issue
Block a user