Add height, max{height,width}, width video params

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:
     <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>height</code></dt>
+    <dd>Optional. String. CSS value. Video height.</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>maxheight</code></dt>
+    <dd>Optional. String. CSS value. Video maximum height.</dd>
+    <dt><code>maxwidth</code></dt>
+    <dd>Optional. String. CSS value. Video maximum width.</dd>
     <dt><code>muted</code></dt>
     <dd>Optional. Boolean. Mute the video. Default is <code>false</code>.</dd>
     <dt><code>pip</code></dt>
@@ -604,6 +614,8 @@ Parameters:
     <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>
+    <dt><code>width</code></dt>
+    <dd>Optional. String. CSS value. Video width.</dd>
 </dl>
 
 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:
     <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>height</code></dt>
+    <dd>Optional. String. CSS value. Video height.</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>maxheight</code></dt>
+    <dd>Optional. String. CSS value. Video maximum height.</dd>
+    <dt><code>maxwidth</code></dt>
+    <dd>Optional. String. CSS value. Video maximum width.</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>video</code></dt>
     <dd>Optional. Position 0. String. Video ID.</dd>
+    <dt><code>width</code></dt>
+    <dd>Optional. String. CSS value. Video width.</dd>
 </dl>
 
 ## Customize

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:

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:

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";
         }
     }

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 }}
 
-<div class="{{ $class }}">
+{{ $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 "; " }}
+
+<div class="{{ $class }}" {{ with $styles }} style="{{ . | safeCSS }}" {{ end }}>
     {{ partial "paige/iframe.html" (dict
         "fullscreen" $fullscreen
         "referrerpolicy" $referrerpolicy

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

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