kaorun343 / Vue Youtube Embed
Licence: mit
Vue.js and YouTube
Stars: ✭ 387
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Youtube Embed
Upnext
Chrome Extension for streaming music from SoundCloud & YouTube
Stars: ✭ 320 (-17.31%)
Mutual labels: youtube
Privacy Redirect
A simple web extension that redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.
Stars: ✭ 342 (-11.63%)
Mutual labels: youtube
Php Youtube Api
PHP wrapper for the Youtube Data API v3 ( Non-OAuth )
Stars: ✭ 376 (-2.84%)
Mutual labels: youtube
Socialreaper
Social media scraping / data collection library for Facebook, Twitter, Reddit, YouTube, Pinterest, and Tumblr APIs
Stars: ✭ 338 (-12.66%)
Mutual labels: youtube
Youtube Dl Android
📦📦Video downloader for Android - Download videos from Youtube, Facebook, Twitter, Instagram, Dailymotion, Vimeo and more than 1000 other sites
Stars: ✭ 322 (-16.8%)
Mutual labels: youtube
Youtube Music
YouTube Music Desktop App bundled with custom plugins (and built-in ad blocker / downloader)
Stars: ✭ 376 (-2.84%)
Mutual labels: youtube
Advertools
advertools - online marketing productivity and analysis tools
Stars: ✭ 341 (-11.89%)
Mutual labels: youtube
Home Assistantconfig
🏠 Home Assistant configuration & Documentation for my Smart House. Write-ups, videos, part lists, and links throughout. Be sure to ⭐ it. Updated FREQUENTLY!
Stars: ✭ 3,687 (+852.71%)
Mutual labels: youtube
Piptool
Add the Picture-in-Picture Functionality to YouTube, Netflix, Plex and other video broadcasting services in macOS Sierra
Stars: ✭ 337 (-12.92%)
Mutual labels: youtube
Start Machine Learning In 2020
A complete guide to start and improve in machine learning (ML), artificial intelligence (AI) in 2021 without ANY background in the field and stay up-to-date with the latest news and state-of-the-art techniques!
Stars: ✭ 357 (-7.75%)
Mutual labels: youtube
Clipbucket
Open source video sharing website script, Tune.pk clone, Youtube clone, dailymotion clone. PHP.
Stars: ✭ 318 (-17.83%)
Mutual labels: youtube
Youtube player flutter
Flutter plugin for playing or streaming YouTube videos inline using the official iFrame Player API. Supports both Android and iOS platforms.
Stars: ✭ 366 (-5.43%)
Mutual labels: youtube
Netflix To Srt
Rip, extract and convert subtitles to .srt closed captions from .xml/dfxp/ttml and .vtt/WebVTT (e.g. Netflix, YouTube)
Stars: ✭ 387 (+0%)
Mutual labels: youtube
Vue YouTube Embed
This is a component for Vue.js to utilize YouTube iframe API easily. This is based on Angular YouTube Embed
License
MIT License
install
<script src="vue-youtube-embed.umd.js"></script>
<script>
Vue.use(VueYouTubeEmbed)
</script>
or
// NPM
npm i -S vue-youtube-embed
// or with Yarn
yarn add vue-youtube-embed
import Vue from 'vue'
import VueYouTubeEmbed from 'vue-youtube-embed'
Vue.use(VueYouTubeEmbed)
// if you don't want install the component globally
Vue.use(VueYouTubeEmbed, { global: false })
// if you want to install the component globally with a different name
Vue.use(VueYouTubeEmbed, { global: true, componentId: "youtube-media" })
Usage
Please pass the ID of the video that you'd like to show.
<youtube :video-id="videoId"></youtube>
<!-- or with a custom component identifier -->
<youtube-media :video-id="videoId"></youtube-media>
Props
These are available props.
-
player-width
:String
orNumber
, default value is640
-
player-height
:String
orNumber
, default value is360
-
player-vars
:Object
, default value is{start: 0, autoplay: 0}
Can also specifyrel
. -
video-id
:String
,required
-
mute
:Boolean
default value isfalse
-
host
:String
default value ishttps://www.youtube.com
. Can be set tohttps://www.youtube-nocookie.com
as well.
Methods
These functions are the same as the original one.
getIdFromURL
getTimeFromURL
import { getIdFromURL, getTimeFromURL } from 'vue-youtube-embed'
let videoId = getIdFromURL(url)
let startTime = getTimeFromURL(url)
or
export default {
methods: {
method (url) {
this.videoId = this.$youtube.getIdFromURL(url)
this.startTime = this.$youtube.getTimeFromURL(url)
}
}
}
Events
These are the events that will be emitted by the component.
ready
ended
playing
paused
buffering
qued
error
The first argument contains the instance of YT.Player
at the parameter target
.
The way of start playing video automatically
<youtube :player-vars="{ autoplay: 1 }"></youtube>
Example on vue-play
// yarn or npm
yarn install
yarn run play
Example code
<div id="#app">
<section>
<h2>listening events</h2>
<youtube :video-id="videoId" @ready="ready" @playing="playing"></youtube>
</section>
<section>
<h2>add options</h2>
<youtube :video-id="videoId" player-width="1280" player-height="750" :player-vars="{autoplay: 1}"></youtube>
</section>
</div>
'use strict'
import Vue from 'vue'
import VueYouTubeEmbed from 'vue-youtube-embed'
Vue.use(VueYouTubeEmbed)
const app = new Vue({
el: '#app',
data: {
videoId: 'videoId',
},
methods: {
ready (event) {
this.player = event.target
},
playing (event) {
// The player is playing a video.
},
change () {
// when you change the value, the player will also change.
// If you would like to change `playerVars`, please change it before you change `videoId`.
// If `playerVars.autoplay` is 1, `loadVideoById` will be called.
// If `playerVars.autoplay` is 0, `cueVideoById` will be called.
this.videoId = 'another video id'
},
stop () {
this.player.stopVideo()
},
pause () {
this.player.pauseVideo()
}
}
})
Usage with Nuxt SSR
To get this component working with Nuxt, wrap it in Nuxt's no-ssr
component.
Contribution
contribution welcome!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].