Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-youtube-iframe-gene
Advanced tools
Readme
Hi, this is a Vue plugin to add youtube embed videos to your web project and control them.
It is very handy to create a custom player based on youtube videos, checkout this website for example : https://foreignrap.com
First add it to your project via yarn:
yarn add vue-youtube-iframe-api
OR npm:
npm install vue-youtube-iframe-api --save
Then, tell Vue about the plugin (Note that the name of the variable here is up to you).
import Vue from 'vue';
import Vytia from 'vue-youtube-iframe-api';
// simple way
Vue.use(Vytia);
// OR, with configuration
Vue.use(Vytia, {
scriptUrl: null, // API url, OPTIONAL, default: https://www.youtube.com/iframe_api
width: null, // global player width, OPTIONAL, default: 640
height: null, // global player height, OPTIONAL, default: 360
playerVars: null, // global playerVars, OPTIONAL, default: {}
onLoad: null, // iframe loaded callback function, OPTIONAL
onError: null, // iframe load failed callback function, OPTIONAL
});
// instan your Vue app
new Vue( ... );
This Vue plugin gives you access to a <vytia-player ytid="..."></vytia-player>
component.
However, you can use the component name you want by importing the component locally or globally.
import Vue from 'vue'
import VuePlayerPlugin, { Player } from 'vue-youtube-iframe-api'
Vue.use(VuePlayerPlugin)
// globally
Vue.component('my-custom-name', Player)
// OR locally
new Vue({
components: {
MyPlayer: Player
}
})
Just add the component where you want with either a id or url prop.
When the prop changes, the player will automatically load the new relevant video.
prop | description | type | default |
---|---|---|---|
id | youtube video id note: both "ytid" & "yturl" can't be used at the same time | String | null |
url | youtube video url note: both "ytid" & "yturl" can't be used at the same time | String | null |
width | the iframe's width note: youtube asks for 200 minimum | String | Number |
height | the iframe's height note: youtube asks for 200 minimum | String | Number |
playerVars | the iframe's player variables, full list: https://developers.google.com/youtube/player_parameters?hl=fr | Object | {} |
Make sure to look at all player variables as this will help you remove controls from the youtube iframe.
https://developers.google.com/youtube/player_parameters?hl=fr
event | description |
---|---|
ready | fires when the player is ready and the player's instance can be used |
error | fires when the player encounters an error https://developers.google.com/youtube/iframe_api_reference?hl=fr#Events |
unstarted | fires when player ready but not started because no video |
playing | fires when player starts playing |
paused | fires when player stops playing and is on pause |
cued | fires when a video was added to the player's queue but hasn't played yet |
buffering | fires when player starts buffering / loading |
ended | fires when player video has ended |
You can access these methods by adding a ref on the component.
method | description | params |
---|---|---|
loadById | programatically loads a new video on the player by ID | id: String, options: Object |
loadByUrl | programatically loads a new video on the player by URL | url: String, options: Object |
You can access the youtube player's instance by adding a ref on the component. You need to wait for the player to be ready though. When the player is not ready, the property holding the instance is null.
Full list of the instance's methods you can use below: https://developers.google.com/youtube/iframe_api_reference?hl=fr#Playback_controls
<vytia-player ytid="some youtube id" ref="yt" @ready="onPlayerReady"></vytia-player>
new Vue({
methods: {
onPlayerReady () {
// you have access to the ref here
this.$refs.yt.player.seekTo( ... )
// you can see the full list of methods available here
// https://developers.google.com/youtube/iframe_api_reference?hl=fr#Playback_controls
}
}
})
Make sure to check out the demo to see how to control the player.
The demo works with parcel-bundler.
Install it by doing npm install -g parcel-bundler
or yarn global add parcel-bundler
.
FAQs
Vue JS component wrapping a Youtube Video Player with the Youtube Iframe API
The npm package vue-youtube-iframe-gene receives a total of 8 weekly downloads. As such, vue-youtube-iframe-gene popularity was classified as not popular.
We found that vue-youtube-iframe-gene demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.