Vimeo

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