Skip to content
calebwaldorf edited this page Jun 29, 2020 · 2 revisions

Vimeo directives (Third-party hosted media)

Third-party hosted media on Vimeo can be added to a b-ber project using either the vimeo or vimeo-inline directive. The behavior of the vimeo and vimeo-inline directives mimics that of the video and video-inline directives.

The b-ber vimeo element must be declared with an id and source attribute. The source attribute is the Vimeo video ID.

Vimeo directive

The vimeo directive, when rendered into HTML, will add the designated poster image to the body of the project, which, when clicked, links to the corresponding vimeo player in the Figures section of the project. Please note if there is no poster image set, the figures section will not be generated and the Vimeo video will not be accessible.

Input

::: vimeo:my-unique-id-1 source:56282283 poster:figure.jpg
:: Vimeo video caption.
::

Output (Reader)

Project body

<div class="figure__small figure__small--landscape">
  <figure id="refmy-unique-id-1">
    <a href="figures-titlepage.xhtml#my-unique-id-1">
      <img src="../images/figure.jpg" alt="Poster Image"/>
    </a>
  </figure>
</div>

Figures section

<div class="figure__large figure__large--vimeo figure__large--16x9">
  <figure id="my-unique-id-1">
    <div class="figure__items">
      <div class="vimeo vimeo--16x9">
        <div class="embed supported">
          
          <iframe
            data-vimeo="true"
            data-vimeo-poster="../images/figure.jpg"
            data-aspect-ratio="16x9"
            src="https://player.vimeo.com/video/56282283" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" frameborder="0" />
        </div>
      </div>

      <div class="figcaption">
        <p class="small">
            Vimeo vide caption.
          <a href="project-name-chapter-01.xhtml#refmy-unique-id-1">Return</a>
        </p>
      </div>
    </div>
  </figure>
</div>

Output (EPUB/Mobi)

Project body

<div class="figure__small figure__small--landscape">
  <figure id="refmy-unique-id-1">
    <a href="figures-titlepage.xhtml#my-unique-id-1">
      <img src="../images/figure.jpg" alt="Poster Image"/>
    </a>
  </figure>
</div>

Figures section

Please note since EPUBs and Mobi files do not support external resources, a message is generated. Since embedded media (iframes) are not widely supported, it is advisable to use a media or media-inline directive with the media.yml file. This will allow alternative media to be built into the project.

<div class="figure__large figure__large--landscape">
  <figure id="my-unique-id-1">
    <div class="figure__items">
      <a href="project-name-chapter-01.xhtml#refmy-unique-id-1">
        <img class="landscape" alt="Media Fallback Image" src="../images/figure.jpg"/>
      </a>
      <div class="figcaption">
        <p class="small">Your device does not support embedded media.</p>
      </div>    
    </div>
  </figure>
</div>

Vimeo-inline directive

The vimeo-inline directive, when rendered into HTML, will add the Vimeo player directly into the flow of the project.

Input

::: vimeo-inline:my-unique-id-2 source:56282283
:: Vimeo video caption.
::

Output (Reader)

Project body

<section class="vimeo vimeo--16x9 figure__large figure__inline">
  <div id="my-unique-id-2" class=" embed supported">
    <iframe
      data-vimeo="true"
      data-vimeo-poster=""
      data-aspect-ratio="16x9"
      src="https://player.vimeo.com/video/56282283"
      webkitallowfullscreen="webkitallowfullscreen"
      mozallowfullscreen="mozallowfullscreen"
      allowfullscreen="allowfullscreen"
      frameborder="0">
    </iframe>
  </div>
  <p class="caption caption__vimeo"> Vimeo video caption.
  </p>
</section>

Output (EPUB/Mobi)

Please note since EPUBs and Mobi files do not support external resources, a message is generated. Since embedded media (iframes) are not widely supported, it is advisable to use the media or media-inline directive with the media.yml file. This will allow alternative media to be built into the project.

Project body

<section class="vimeo figure__large figure__inline">
  <div id="my-unique-id-2"  class=" embed unsupported">
    <div class="media__fallback media__fallback__vimeo media__fallback--image">
      <figure>      
      </figure>
    </div>
    <p class="media__fallback media__fallback__vimeo media__fallback--text">Your device does not support embedded media.</p>
  </div>
</section>

Vimeo attributes

The vimeo and vimeo-inline directive support Vimeo's Player Parameters:

Attribute Value Description
id string (required) Directive ID
source string (required) Vimeo video ID
poster string Poster image
aspectratio string The aspect ratio of the video and poster image as AxB. E.g., 16x9
classes string Class names
autopause string (bool) Must be "yes" or "no". Default: "no"
autoplay string (bool) Must be "yes" or "no". Default: "no"
background string (bool) Must be "yes" or "no". Default: "no"
byline string (bool) Must be "yes" or "no". Default: "no"
color string Color of the controls as hex code, e.g., ff0000
controls string (bool) Must be "yes" or "no". Default: "yes"
dnt string (bool) Must be "yes" or "no". Default: "no"
fun string (bool) Must be "yes" or "no". Default: "yes"
loop string (bool) Must be "yes" or "no". Default: "no"
muted string (bool) Must be "yes" or "no". Default: "no"
playsinline string (bool) Must be "yes" or "no". Default: "yes"
portrait string (bool) Must be "yes" or "no". Defaults to Vimeo user settings
quality string Must be one of "240p", "360p", "540p", "720p", "1080p", "2k", "4k" or "auto. Default: "auto"
speed string (bool) Must be "yes" or "no". Default: "no"
#t string Video start time in minutes and seconds. E.g., "1m2s", "0m2s". Default: "0m"
texttrack string (bool) Must be "yes" or "no". Default: "no"
title string (bool) Must be "yes" or "no". Defaults to Vimeo user settings
transparent string (bool) Must be "yes" or "no". Default: "no"

For example, a vimeo-inline that autoplays, loops, has a custom start time, and custom CSS classes, would be implemented as follows:

::: vimeo-inline:my-unique-id-3 source:56282283 autoplay:yes loop:yes color:ff7f50 #t:0m22s classes:"class-one class-two"
:: Vimeo video with custom attributes caption.
::
Clone this wiki locally