Vimeo - triplecanopy/b-ber GitHub Wiki
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.
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.
::: vimeo:my-unique-id-1 source:56282283 poster:figure.jpg
:: Vimeo video caption.
::
<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>
<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>
<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>
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>
The vimeo-inline directive, when rendered into HTML, will add the Vimeo player directly into the flow of the project.
::: vimeo-inline:my-unique-id-2 source:56282283
:: Vimeo video caption.
::
<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>
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.
<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>
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.
::