Ecosystems:
YouTube,
SoundCloud
vue media embed Embed for YouTube, Vimeo and SoundCloud This plugin requires Vuex
Features
- Auto pause players
- Restore previous state from store
Installation
npm install vue-media-embed
Usage
import Vue from 'vue'
import VueMediaEmbed from 'vue-media-embed'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({ ... })
Vue.use(VueMediaEmbed, { store })
Example
In this example we embed 3 players
<vue-media-embed source="soundcloud://295067272" :auto-play="1" :allow-fullscreen="0" />
<vue-media-embed source="youtube://C6vinrXWxls" :auto-play="0" :allow-fullscreen="1" />
<vue-media-embed source="vimeo://70114668" :auto-play="0" :allow-fullscreen="0" />
sources like http://vimeo.com/190613094 and https://www.youtube.com/watch?.. or https://youtu.be/{ID} are fine too
Overall props
| Property | Description | Default | Example |
|---|---|---|---|
| source | Platform and ID of the media | required | vimeo://70114668 |
| auto-play | Start playing automatically when player is loaded | 0 | 1 |
| auto-pause | Pause player when another player starts playing | 1 | 0 |
| related | Show related content | 0 | 1 |
SoundCloud
see docs
| Property | Description | Default | Options |
|---|---|---|---|
| show-buying | Show/hide buy buttons | 0 | 1 |
| show-liking | Show/hide like buttons | 0 | 1 |
| show-download | Show/hide download buttons | 0 | 1 |
| show-sharing | Show/hide share buttons/dialogues | 0 | 1 |
| show-artwork | Show/hide artwork | 0 | 1 |
| show-comments | Show/hide comments | 0 | 1 |
| show-play-count | Show/hide number of sound plays | 0 | 1 |
| show-user | Show/hide the uploader name | 0 | 1 |
| start-track | Preselects a track in the playlist, given a number between 0 and the length of the playlist. | 0 | positive integer |
Vimeo
see docs
| Property | Description | Default | Options |
|---|---|---|---|
| show-badge | enable or disable badge on the video | 0 | 1 |
| byline | Show the user’s byline on the video | 0 | 1 |
| color | Specify the color of the video controls. Defaults to 00adef. Make sure that you don’t include the #. | 00adef | |
| loop | Play the video again when it reaches the end | 0 | 1 |
| show-portrait | Show the user’s portrait on the video | 0 | 1 |
| show-title | Show the title on the video | 0 | 1 |
YouTube
see docs
| Property | Description | Default | Options |
|---|---|---|---|
| color | Color theme | 'red' | 'white' |
| controls | video player controls | 1 | 0 2 |
| disable-keyboard | Keyboard controls | 0 | 1 |
| start | Starts playing video in seconds | -1 | p ositive integer |
| end | Stop playing video from start in seconds | -1 | positive integer |
| allow-fullscreen | Displays fullscreen button | 1 | 0 |
| locale | Sets the player's interface language | '' | 'fr', 'fr-ca',.. |
| annotations | 1 causes video annotations to be shown by default, whereas setting to 3 causes video annotations to not be shown by default. | 3 | 1, 2 |
| loop | Loop a video | 0 | 1 |
| modest-branding | Minimize YouTube logo | 1 | 0 |
| plays-inline | plays video inline for iOS. | 0 | 1 |
| show-info | Displays information | 0 | 1 |
Issues and features requests
Any issues or would love to see another embed being supported? Add a feature request
Package Rankings
Top 19.11% on Npmjs.org