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