04 Jun 2023

Shortcodes for videos

1 minute reading time

#Video

#Usage

src: an array of video file paths (mandatory)
width: the width of the video (optional)
height: the height of the video (optional)
autoplay: when set to "true", the video autoplays on load (optional)
loop: when set to "true", the video plays on a loop (optional)
muted: when set to "true", the audio will be initially silenced (optional)

#Input

{{ video(src=["over9000.mp4", "over9000.webm"]) }}

#Output

<div class="video-local">
  <video controls>
      <source src="/posts/video/over9000.mp4?v=14901c9ff1b7ed2de1fc3110dbf76eb3fb1f07338b57eca03524248062806b33cf2ae89164d97ec005393027c27d97b9e33f5bb38879a5cb32ad2f420985acde" type="video/mp4"/>
      <source src="/posts/video/over9000.webm?v=6c41618a856aaa7ef5895eed705e7519f05d31dde3fc6bc3f70e1c15cb430edeb24fff56dd1d48151cd26f45fab4bfeb520ea4249ac90ebf4c44a855bdf25eb6" type="video/webm"/>
      Your browser does not support the video formats in use.
  </video>
</div>

#Input

{{ video(src=["over9000.mp4"], muted="true") }}

#Output

<div class="video-local">
  <video controls muted=true>
      <source src="/posts/video/over9000.mp4?v=14901c9ff1b7ed2de1fc3110dbf76eb3fb1f07338b57eca03524248062806b33cf2ae89164d97ec005393027c27d97b9e33f5bb38879a5cb32ad2f420985acde" type="video/mp4"/>
      Your browser does not support the video formats in use.
  </video>
</div>

#Vimeo

#Usage

id: the video id (mandatory)
autoplay: when set to "true", the video autoplays on load (optional)
loop: when set to "true", the video plays on a loop (optional)
noautopause: when set to "true", the video will not autopause (optional)
title - set alt title for the iframe (optional, defaults to "Vimeo")
cookie - set to "true" if you want tracking cookies, otherwise it defaults to false.

#Input

{{ vimeo(id="4340383") }}

#Output

<div class="video-embedded">
  <iframe
    src="https://player.vimeo.com/video/4340383?embedded=true&dnt=1"
    class="video-iframe"
    title="Vimeo"
    webkitallowfullscreen
    mozallowfullscreen
    allowfullscreen>
  </iframe>
</div>

#YouTube

#Usage

id: the video id (mandatory)
playlist: the playlist id (optional)
autoplay: when set to "true", the video autoplays on load (optional)
title - set alt title for the iframe (optional, defaults to "Youtube")
cookie - set to "true" if you want tracking cookies, otherwise it defaults to false.

#Input

{{ youtube(id="frBzlP6t9Gw") }}

#Output

<div class="video-embedded">
  <iframe
    src="https://www.youtube-nocookie.com/embed/frBzlP6t9Gw"
    class="video-iframe"
    title="Youtube"
    webkitallowfullscreen
    mozallowfullscreen
    allowfullscreen>
  </iframe>
</div>