vime-vimeo

Enables loading, playing and controlling videos from Vimeo.

You don't interact with this component for passing player properties, controlling playback, listening to player events and so on, that is all done through the vime-player component.

Quirks

• Only Vimeo PRO members can set/change the playbackRate.

• playbackQuality and playbackQualities are not supported because there is no API for it.

Usage

HTML

<vime-player controls>

<vime-vimeo video-id="411652396"></vime-vimeo>

<!-- ... -->

</vime-player>

React

import React from 'react';

import { VimePlayer, VimeVimeo } from '@vime/react';

function Example() {

return (

<VimePlayer controls>

<VimeVimeo videoId="411652396" />

{/* ... */}

</VimePlayer>

);

}

Vue

example.vue

<template>

<VimePlayer controls>

<VimeVimeo videoId="411652396" />

<!-- ... -->

</VimePlayer>

</template>

<script>

import { VimePlayer, VimeVimeo } from '@vime/vue';

export default {

components: {

VimePlayer,

VimeVimeo,

},

};

</script>

Svelte

example.svelte

<VimePlayer controls>

<VimeVimeo videoId="411652396" />

<!-- ... -->

</VimePlayer>

<script lang="ts">

import { VimePlayer, VimeVimeo } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vime-player controls>

<vime-vimeo videoId="411652396" />

{/* ... */}

</vime-player>

);

}

}

Angular

example.html

<vime-player controls>

<vime-vimeo cookies="true" video-id="411652396"></vime-vimeo>

<!-- ... -->

</vime-player>

Properties

Property	Attribute	Description	Type	Default
byline	byline	Whether to display the video owner's name.	boolean	true
color	color	The hexadecimal color value of the playback controls. The embed settings of the video might override this value.	string ∣ undefined	undefined
noAutoAspectRatio	no-auto-aspect-ratio	Turns off automatically determining the aspect ratio of the current video.	boolean	false
portrait	portrait	Whether to display the video owner's portrait.	boolean	true
poster	poster	The absolute URL of a custom poster to be used for the current video.	string ∣ undefined	undefined
videoId (required)	video-id	The Vimeo resource ID of the video to load.	string	undefined

Dependencies

Used by

• vime-playground

Depends on

• vime-embed

Graph

graph TD;

vime-vimeo --> vime-embed

vime-playground --> vime-vimeo

style vime-vimeo fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS