Add vimeo shortcode
This commit is contained in:
Will Faught
84
README.md
84
README.md
@@ -638,6 +638,90 @@ Parameters:
|
||||
|
||||
It has the other parameters of the `paige/figure` shortcode.
|
||||
|
||||
### Vimeo
|
||||
|
||||
The `paige/vimeo` shortcode provides a responsive Vimeo video.
|
||||
|
||||
```
|
||||
{{< paige/vimeo
|
||||
autopause=true
|
||||
autoplay=false
|
||||
background=false
|
||||
byline=true
|
||||
color="00adef"
|
||||
controls=true
|
||||
description="My description"
|
||||
dnt=false
|
||||
fullscreen=true
|
||||
keyboard=true
|
||||
loop=false
|
||||
muted=false
|
||||
pip=false
|
||||
playsinline=true
|
||||
portrait=true
|
||||
quality="auto"
|
||||
speed=false
|
||||
texttrack=false
|
||||
time="1m2s"
|
||||
title=true
|
||||
transparent=true
|
||||
video="644036051"
|
||||
>}}
|
||||
```
|
||||
|
||||
Inner content: None.
|
||||
|
||||
Parameters:
|
||||
|
||||
<dl>
|
||||
<dt><code>autopause</code></dt>
|
||||
<dd>Optional. Boolean. Enable playing more than one Vimeo video on the same page. Default is <code>true</code>.</dd>
|
||||
<dt><code>autoplay</code></dt>
|
||||
<dd>Optional. Boolean. Autoplay the video. Default is <code>false</code>.</dd>
|
||||
<dt><code>background</code></dt>
|
||||
<dd>Optional. Boolean. Autoplay the video. Hide the controls. Loop the video. Mute the video. Default is <code>false</code>.</dd>
|
||||
<dt><code>byline</code></dt>
|
||||
<dd>Optional. Boolean. Show the author. Default is configured per video.</dd>
|
||||
<dt><code>color</code></dt>
|
||||
<dd>Optional. String. Hex code. Control color. Default is <code>00adef</code>.</dd>
|
||||
<dt><code>controls</code></dt>
|
||||
<dd>Optional. Boolean. Show the controls. Default is <code>true</code>.</dd>
|
||||
<dt><code>description</code></dt>
|
||||
<dd>Optional. String. Plain text. Screen reader content. Default is <code>Vimeo video</code>.</dd>
|
||||
<dt><code>dnt</code></dt>
|
||||
<dd>Optional. Boolean. Do not track session data. Default is <code>false</code>.</dd>
|
||||
<dt><code>fullscreen</code></dt>
|
||||
<dd>Optional. Boolean. Enable full screen. Default is <code>true</code>.</dd>
|
||||
<dt><code>keyboard</code></dt>
|
||||
<dd>Optional. Boolean. Enable keyboard input. Default is <code>true</code>.</dd>
|
||||
<dt><code>loop</code></dt>
|
||||
<dd>Optional. Boolean. Loop the video. Default is <code>false</code>.</dd>
|
||||
<dt><code>muted</code></dt>
|
||||
<dd>Optional. Boolean. Mute the video. Default is <code>false</code>.</dd>
|
||||
<dt><code>pip</code></dt>
|
||||
<dd>Optional. Boolean. Show the picture-in-picture control. Default is <code>false</code>.</dd>
|
||||
<dt><code>playsinline</code></dt>
|
||||
<dd>Optional. Boolean. Play inline instead of full screen on mobile devices. Default is <code>true</code>.</dd>
|
||||
<dt><code>portrait</code></dt>
|
||||
<dd>Optional. Boolean. Show the author's profile image. Default is configured per video.</dd>
|
||||
<dt><code>quality</code></dt>
|
||||
<dd>Optional. String. The resolution. Must be <code>auto</code>, <code>240p</code>, <code>360p</code>, <code>540p</code>, <code>720p</code>, <code>1080p</code>, <code>2k</code>, or <code>4k</code>. Default is <code>auto</code>.</dd>
|
||||
<dt><code>speed</code></dt>
|
||||
<dd>Optional. Boolean. Show the speed controls. Default is <code>false</code>.</dd>
|
||||
<dt><code>texttrack</code></dt>
|
||||
<dd>Optional. String. Language code and optionally a locale code (e.g. <code>en</code>, <code>en-US</code>). Use the corresponding subtitles. Default is <code>false</code>.</dd>
|
||||
<dt><code>time</code></dt>
|
||||
<dd>Optional. String. Duration (e.g. <code>0m</code>, <code>1m2s</code>). Start time. Default is <code>0m</code>.</dd>
|
||||
<dt><code>title</code></dt>
|
||||
<dd>Optional. Boolean. Show the title. Default is configured per video.</dd>
|
||||
<dt><code>transparent</code></dt>
|
||||
<dd>Optional. Boolean. Use a transparent background instead of a black one. Default is <code>true</code>.</dd>
|
||||
<dt><code>video</code></dt>
|
||||
<dd>Optional. Position 0. String. Video ID.</dd>
|
||||
</dl>
|
||||
|
||||
See [Vimeo documentation](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Player-parameters-overview) for more detail.
|
||||
|
||||
### YouTube
|
||||
|
||||
The `paige/youtube` shortcode provides a responsive YouTube video.
|
||||
|
||||
87
exampleSite/content/blog/vimeo-shortcode.md
Normal file
87
exampleSite/content/blog/vimeo-shortcode.md
Normal file
@@ -0,0 +1,87 @@
|
||||
---
|
||||
categories: [paige]
|
||||
date: 2023-01-22
|
||||
description: Demonstration of the Paige Vimeo shortcode.
|
||||
tags: [shortcodes, videos]
|
||||
title: Vimeo Shortcode
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/vimeo "644036051" */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/vimeo "644036051" >}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/vimeo video="644036051" */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/vimeo video="644036051" >}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/vimeo
|
||||
autopause=true
|
||||
autoplay=false
|
||||
background=false
|
||||
byline=true
|
||||
color="00adef"
|
||||
controls=true
|
||||
description="My description"
|
||||
dnt=false
|
||||
fullscreen=true
|
||||
keyboard=true
|
||||
loop=false
|
||||
muted=false
|
||||
pip=false
|
||||
playsinline=true
|
||||
portrait=true
|
||||
quality="auto"
|
||||
speed=false
|
||||
texttrack=false
|
||||
time="1m2s"
|
||||
title=true
|
||||
transparent=true
|
||||
video="644036051"
|
||||
*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/vimeo
|
||||
autopause=true
|
||||
autoplay=false
|
||||
background=false
|
||||
byline=true
|
||||
color="00adef"
|
||||
controls=true
|
||||
description="My description"
|
||||
dnt=false
|
||||
fullscreen=true
|
||||
keyboard=true
|
||||
loop=false
|
||||
muted=false
|
||||
pip=false
|
||||
playsinline=true
|
||||
portrait=true
|
||||
quality="auto"
|
||||
speed=false
|
||||
texttrack=false
|
||||
time="1m2s"
|
||||
title=true
|
||||
transparent=true
|
||||
video="644036051"
|
||||
>}}
|
||||
106
layouts/shortcodes/paige/vimeo.html
Normal file
106
layouts/shortcodes/paige/vimeo.html
Normal file
@@ -0,0 +1,106 @@
|
||||
{{ $autopause := .Get "autopause" | default true }}
|
||||
{{ $autoplay := .Get "autoplay" }}
|
||||
{{ $background := .Get "background" }}
|
||||
{{ $byline := .Get "byline" | default true }}
|
||||
{{ $color := .Get "color" }}
|
||||
{{ $controls := .Get "controls" | default true }}
|
||||
{{ $description := .Get "title" | default "Vimeo video" }}
|
||||
{{ $dnt := .Get "dnt" | default .Page.Site.Config.Privacy.Vimeo.EnableDNT }}
|
||||
{{ $fullscreen := .Get "fullscreen" | default true }}
|
||||
{{ $keyboard := .Get "keyboard" | default true }}
|
||||
{{ $loop := .Get "loop" }}
|
||||
{{ $muted := .Get "muted" }}
|
||||
{{ $pip := .Get "pip" }}
|
||||
{{ $playsinline := .Get "playsinline" | default true }}
|
||||
{{ $portrait := .Get "portrait" }}
|
||||
{{ $quality := .Get "quality" }}
|
||||
{{ $speed := .Get "speed" }}
|
||||
{{ $time := .Get "time" }}
|
||||
{{ $texttrack := .Get "texttrack" }}
|
||||
{{ $title := .Get "title" }}
|
||||
{{ $transparent := .Get "transparent" | default true }}
|
||||
{{ $video := .Get 0 | default (.Get "video") }}
|
||||
|
||||
{{ $params := slice }}
|
||||
|
||||
{{ if not $autopause }}
|
||||
{{ $params = $params | append "autopause=0" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $autoplay }}
|
||||
{{ $params = $params | append "autoplay=1" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $background }}
|
||||
{{ $params = $params | append "background=1" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if and (ne $byline nil) (ne $byline "") }}
|
||||
{{ $params = $params | append (printf "portrait=%v" (cond $byline 1 0)) }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $color }}
|
||||
{{ $params = $params | append (printf "color=%v" .) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if not $controls }}
|
||||
{{ $params = $params | append "controls=0" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $dnt }}
|
||||
{{ $params = $params | append "dnt=1" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if not $keyboard }}
|
||||
{{ $params = $params | append "keyboard=0" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $loop }}
|
||||
{{ $params = $params | append "loop=1" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $muted }}
|
||||
{{ $params = $params | append "muted=1" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $pip }}
|
||||
{{ $params = $params | append "pip=1" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if not $playsinline }}
|
||||
{{ $params = $params | append "playsinline=0" }}
|
||||
{{ end }}
|
||||
|
||||
{{ if and (ne $portrait nil) (ne $portrait "") }}
|
||||
{{ $params = $params | append (printf "portrait=%v" (cond $portrait 1 0)) }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $quality }}
|
||||
{{ $params = $params | append (printf "quality=%v" .) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $speed }}
|
||||
{{ $params = $params | append "speed=1" }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $texttrack }}
|
||||
{{ $params = $params | append (printf "texttrack=%v" .) }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $time }}
|
||||
{{ $params = $params | append (printf "#t=%v" .) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if and (ne $title nil) (ne $title "") }}
|
||||
{{ $params = $params | append (printf "title=%v" (cond $title 1 0)) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if not $transparent }}
|
||||
{{ $params = $params | append "transparent=0" }}
|
||||
{{ end }}
|
||||
|
||||
{{ $params = delimit ($params | sort | uniq) "&" }}
|
||||
|
||||
<div class="mb-3 ratio ratio-16x9">
|
||||
<iframe {{ if $fullscreen }} allowfullscreen {{ end }} referrerpolicy="no-referrer" src="https://player.vimeo.com/video/{{ $video | safeURL }}{{ with $params }}?{{ . | safeURL }}{{ end }}" {{ with $description }} title="{{ . }}" {{ end }}></iframe>
|
||||
</div>
|
||||
Reference in New Issue
Block a user