Rockingcool
/
paige-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add vimeo shortcode

Browse Source
master
Will Faught 2 years ago
parent 8631ba0f78
commit b9229b136b
3 changed files with 277 additions and 0 deletions
Show Stats Download Patch File Download Diff File

84
README.md
Unescape Escape View File

@ -638,6 +638,90 @@ Parameters:
It has the other parameters of the `paige/figure` shortcode. 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 ### YouTube
The `paige/youtube` shortcode provides a responsive YouTube video. The `paige/youtube` shortcode provides a responsive YouTube video.

87
exampleSite/content/blog/vimeo-shortcode.md
Unescape Escape View 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
Unescape Escape View 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>
Write Preview
Loading…
Cancel
Save