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
+{{* paige/vimeo height="10rem" video="644036051" */>}}
+```
+
+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
+{{* paige/vimeo maxheight="10rem" video="644036051" */>}}
+```
+
+Result:
+
+{{< paige/vimeo maxheight="10rem" video="644036051" >}}
+
+## Maxwidth parameter
+
+Code:
+
+```go-text-template
+{{* paige/vimeo maxwidth="50%" video="644036051" */>}}
+```
+
+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
+{{* paige/vimeo video="644036051" width="50%" */>}}
+```
+
+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
+{{* paige/youtube height="10rem" video="dQw4w9WgXcQ" */>}}
+```
+
+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
+{{* paige/youtube maxheight="10rem" video="dQw4w9WgXcQ" */>}}
+```
+
+Result:
+
+{{< paige/youtube maxheight="10rem" video="dQw4w9WgXcQ" >}}
+
+## Maxwidth parameter
+
+Code:
+
+```go-text-template
+{{* paige/youtube maxwidth="50%" video="dQw4w9WgXcQ" */>}}
+```
+
+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
+{{* paige/youtube video="dQw4w9WgXcQ" width="50%" */>}}
+```
+
+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