From b8259e8e96d8d63af2072d5a7095a64152a70586 Mon Sep 17 00:00:00 2001 From: Will Faught Date: Fri, 3 Mar 2023 20:19:33 -0800 Subject: [PATCH] Add height, max{height,width}, width video params --- README.md | 24 ++++++++++++ exampleSite/content/shortcodes/vimeo.md | 48 +++++++++++++++++++++++ exampleSite/content/shortcodes/youtube.md | 48 +++++++++++++++++++++++ layouts/partials/paige/scripts.html | 2 +- layouts/partials/paige/video.html | 26 +++++++++++- layouts/shortcodes/paige/vimeo.html | 3 ++ layouts/shortcodes/paige/youtube.html | 3 ++ 7 files changed, 152 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3fe94959..82a1ec3d 100644 --- a/README.md +++ b/README.md @@ -539,8 +539,11 @@ The `paige/vimeo` shortcode provides a responsive Vimeo video. description="My description" dnt=false fullscreen=true + height="10rem" keyboard=true loop=false + maxheight="10rem" + maxwidth="10rem" muted=false pip=false playsinline=true @@ -552,6 +555,7 @@ The `paige/vimeo` shortcode provides a responsive Vimeo video. title=true transparent=true video="644036051" + width="10rem" >}} ``` @@ -578,10 +582,16 @@ Parameters:
Optional. Boolean. Do not track session data. Default is false.
fullscreen
Optional. Boolean. Enable full screen. Default is true.
+
height
+
Optional. String. CSS value. Video height.
keyboard
Optional. Boolean. Enable keyboard input. Default is true.
loop
Optional. Boolean. Loop the video. Default is false.
+
maxheight
+
Optional. String. CSS value. Video maximum height.
+
maxwidth
+
Optional. String. CSS value. Video maximum width.
muted
Optional. Boolean. Mute the video. Default is false.
pip
@@ -604,6 +614,8 @@ Parameters:
Optional. Boolean. Use a transparent background instead of a black one. Default is true.
video
Optional. Position 0. String. Video ID.
+
width
+
Optional. String. CSS value. Video width.
See [Vimeo documentation](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Player-parameters-overview) for more detail. @@ -619,11 +631,15 @@ The `paige/youtube` shortcode provides a responsive YouTube video. description="YouTube video" end=0 fullscreen=true + height="10rem" list="PL2WkvfelorAFjpzGUWc4OWAWmiJpwL97L" loop=false + maxheight="10rem" + maxwidth="10rem" mute=false start=0 video="dQw4w9WgXcQ" + width="10rem" >}} ``` @@ -642,16 +658,24 @@ Parameters:
Optional. Integer. Elapsed seconds. Stop the video here.
fullscreen
Optional. Boolean. Enable full screen. Default is true.
+
height
+
Optional. String. CSS value. Video height.
list
Optional. String. Playlist ID.
loop
Optional. Boolean. Loop the video.
+
maxheight
+
Optional. String. CSS value. Video maximum height.
+
maxwidth
+
Optional. String. CSS value. Video maximum width.
mute
Optional. Boolean. Mute the video.
start
Optional. Integer. Elapsed seconds. Start the video here.
video
Optional. Position 0. String. Video ID.
+
width
+
Optional. String. CSS value. Video width.
## Customize diff --git a/exampleSite/content/shortcodes/vimeo.md b/exampleSite/content/shortcodes/vimeo.md index fee27752..3f74a47f 100644 --- a/exampleSite/content/shortcodes/vimeo.md +++ b/exampleSite/content/shortcodes/vimeo.md @@ -131,6 +131,18 @@ Result: {{< paige/vimeo fullscreen=false video="644036051" >}} +## Height parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/vimeo height="10rem" video="644036051" >}} + ## Keyboard parameter Code: @@ -155,6 +167,30 @@ Result: {{< paige/vimeo loop=true video="644036051" >}} +## Maxheight parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/vimeo maxheight="10rem" video="644036051" >}} + +## Maxwidth parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/vimeo maxwidth="50%" video="644036051" >}} + ## Muted parameter Code: @@ -287,6 +323,18 @@ Result: {{< paige/vimeo video="644036051" >}} +## Width parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/vimeo video="644036051" width="50%" >}} + ## Figure Code: diff --git a/exampleSite/content/shortcodes/youtube.md b/exampleSite/content/shortcodes/youtube.md index 72f8175f..1df9bdf3 100644 --- a/exampleSite/content/shortcodes/youtube.md +++ b/exampleSite/content/shortcodes/youtube.md @@ -83,6 +83,18 @@ Result: {{< paige/youtube fullscreen=false video="dQw4w9WgXcQ" >}} +## Height parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/youtube height="10rem" video="dQw4w9WgXcQ" >}} + ## List parameter Code: @@ -107,6 +119,30 @@ Result: {{< paige/youtube loop=true video="dQw4w9WgXcQ" >}} +## Maxheight parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/youtube maxheight="10rem" video="dQw4w9WgXcQ" >}} + +## Maxwidth parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/youtube maxwidth="50%" video="dQw4w9WgXcQ" >}} + ## Mute parameter Code: @@ -143,6 +179,18 @@ Result: {{< paige/youtube video="dQw4w9WgXcQ" >}} +## Width parameter + +Code: + +```go-text-template +{{}} +``` + +Result: + +{{< paige/youtube video="dQw4w9WgXcQ" width="50%" >}} + ## Figure Code: diff --git a/layouts/partials/paige/scripts.html b/layouts/partials/paige/scripts.html index 417861d0..9e8414f1 100644 --- a/layouts/partials/paige/scripts.html +++ b/layouts/partials/paige/scripts.html @@ -20,7 +20,7 @@ function paigeResize() { var es = document.querySelectorAll(".paige-video"); for (var i = 0; i < es.length; i++) { var e = es[i]; - if (e.style.width !== w) { + if (!e.style.height && !e.style.width) { e.style.width = w + "px"; } } diff --git a/layouts/partials/paige/video.html b/layouts/partials/paige/video.html index a9af512c..0f95688e 100644 --- a/layouts/partials/paige/video.html +++ b/layouts/partials/paige/video.html @@ -2,11 +2,35 @@ {{ $class := $params.class | default "paige-video ratio ratio-16x9" }} {{ $fullscreen := $params.fullscreen }} +{{ $height := $params.height }} +{{ $maxheight := $params.maxheight }} +{{ $maxwidth := $params.maxwidth }} {{ $referrerpolicy := $params.referrerpolicy | default "no-referrer" }} {{ $src := $params.src }} {{ $title := $params.title }} +{{ $width := $params.width }} -
+{{ $styles := slice }} + +{{ if $height }} + {{ $styles = $styles | append (print "height: " $height) }} +{{ end }} + +{{ if $maxheight }} + {{ $styles = $styles | append (print "max-height: " $maxheight) }} +{{ end }} + +{{ if $maxwidth }} + {{ $styles = $styles | append (print "max-width: " $maxwidth) }} +{{ end }} + +{{ if $width }} + {{ $styles = $styles | append (print "width: " $width) }} +{{ end }} + +{{ $styles = delimit $styles "; " }} + +
{{ partial "paige/iframe.html" (dict "fullscreen" $fullscreen "referrerpolicy" $referrerpolicy diff --git a/layouts/shortcodes/paige/vimeo.html b/layouts/shortcodes/paige/vimeo.html index b0d34dd9..33b9ecf9 100644 --- a/layouts/shortcodes/paige/vimeo.html +++ b/layouts/shortcodes/paige/vimeo.html @@ -10,6 +10,7 @@ {{ $height := .Get "height" }} {{ $keyboard := .Get "keyboard" | default true }} {{ $loop := .Get "loop" }} +{{ $maxheight := .Get "maxheight" }} {{ $maxwidth := .Get "maxwidth" }} {{ $muted := .Get "muted" }} {{ $pip := .Get "pip" }} @@ -115,6 +116,8 @@ {{ partial "paige/video.html" (dict "fullscreen" $fullscreen "height" $height + "maxheight" $maxheight + "maxwidth" $maxwidth "referrerpolicy" $referrerpolicy "src" $src "title" $description diff --git a/layouts/shortcodes/paige/youtube.html b/layouts/shortcodes/paige/youtube.html index 9f374244..8ba7edc8 100644 --- a/layouts/shortcodes/paige/youtube.html +++ b/layouts/shortcodes/paige/youtube.html @@ -6,6 +6,7 @@ {{ $height := .Get "height" }} {{ $list := .Get "list" }} {{ $loop := .Get "loop" }} +{{ $maxheight := .Get "maxheight" }} {{ $maxwidth := .Get "maxwidth" }} {{ $mute := .Get "mute" }} {{ $referrerpolicy := .Get "referrerpolicy" | default "no-referrer-when-downgrade" }} @@ -69,6 +70,8 @@ {{ partial "paige/video.html" (dict "fullscreen" $fullscreen "height" $height + "maxheight" $maxheight + "maxwidth" $maxwidth "referrerpolicy" $referrerpolicy "src" $src "title" $description