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

2 years ago · b8259e8e96
parent d54682b8d3
commit b8259e8e96
7 changed files with 152 additions and 2 deletions
--- 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:
    <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
--- 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:
--- 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:
--- 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";
        }
    }
--- 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 }}

-<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
--- 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
--- 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