techassi / vue-youtube-iframe Goto Github PK

View Code? Open in Web Editor NEW

11.0 1.0 0.0 179 KB

Integrate the YouTube Iframe player into your Vue 3 app.

Home Page: https://www.npmjs.com/package/@techassi/vue-youtube-iframe

TypeScript 100.00%

vuejs vue3 youtube youtube-player iframe vue-youtube-iframe youtube-iframe-api typescript

vue-youtube-iframe's Introduction

⚠️ Notice

This plugin is deprecated. Please use the new and improved @vue-youtube/core plugin.

vue-youtube-iframe

This plugin makes it easy to integrate the YouTube Iframe API into your Vue app. This plugin is Vue V3 compatible.

Usage

Installation

npm install @techassi/vue-youtube-iframe --save

yarn add @techassi/vue-youtube-iframe

Basic usage

main.js / main.ts

import { createApp } from 'vue';
import App from './App.vue';

import YoutubeIframe from '@techassi/vue-youtube-iframe';

createApp(App).use(YoutubeIframe).mount('#app');

YourComponent.vue

<template>
    <youtube-iframe :video-id="YT_VIDEO_ID"></youtube-iframe>
</template>

Advanced usage

YourComponent.vue

<template>
    <youtube-iframe
        :video-id="YT_VIDEO_ID"
        :player-width="WIDTH"
        :player-height="HEIGHT"
        :no-cookie="TRUE / FALSE"
        :player-parameters="YT_PLAYER_PARAMS"
        @EVENT="CALLBACK"
    ></youtube-iframe>
</template>

Typings

Vue currently doesn't support typings when using a component in a SFC and accessing it via ref / this.$refs. There is a way to bring in typings when using ref. Please note: This isn't the most elegant solution.

<template>
    <youtube-iframe :video-id="YT_VIDEO_ID" ref="yt"></youtube-iframe>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Player } from '@techassi/vue-youtube-iframe';

export default defineComponent({
    name: 'App',
    mounted() {
        const player = this.$refs.yt as typeof Player;
        // Variable player now has typings
    },
});
</script>

Available props

:videoId / :video-id: Specify the YT video id (e.g. dQw4w9WgXcQ)
:playerWidth / :player-width: Specify the player's width in pixels
:playerHeight / :player-height: Specify the player's height in pixels
:noCookie / :no-cookie: If set to true the host will be set to https://www.youtube-nocookie.com
:playerParameters / :player-parameters: Set player parameters, see here

Available player parameters

For the available player parameters see here

Available Events

@ready, @error, @state-change

For detailed event information check here

vue-youtube-iframe's People

Contributors

Stargazers

Watchers

vue-youtube-iframe's Issues

PLZ Support playlist

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/youtube/index.d.ts#L455-L564

There is playlist property in @types/youtube. Can you add support of playlist iframe?

Video ID doesn't work when using v-model

Hello,

I am trying to use your plugin with a v-model that changes the video ID, here is the code in template (using pugjs):

youtube-iframe(
  v-show="projectData.url.video !== ''"
  :video-id="projectData.url.video",
  player-width="100%",
  player-height="300",
  :player-parameters="youtube.parameters"
)

however if I use a data variable, then the video shows up correctly.

How to reference the player in Vue3 Composition API ?

Hi I'm doing the following in Vue3, with the Composition API:

  <youtube-iframe
    ref="youtube"
    :no-cookie="true"
    :player-width="360"
/>

setup() :

const youtube = ref(null);

Now in onMounted() I can access the player's methods with :

youtube.value.setSize(300,200)

But sometimes this doesn't seem to work and I'm getting:

vue-youtube-iframe.esm.js?b672:181 Uncaught (in promise) TypeError: this.playerInstance.setSize is not a function

Any idea how to fix this or a better way to reference the player in Vue3 (Composition API) ?

How to start/stop the video with Javascript?

Hi, I couldn't find methods like 'playVideo' and 'pauseVideo' in your component, like the ones in vue-youtube-embed (which is sadly only working in Vue2).

Is there a way to start and stop the video with Javascript?

update basic usage code block in readme.md with correction

There a slight mistake in the basic usage code in the instructions found in the readme.

In the import statement for main.js, it says:

import VueYouTubeIframe from 'vue-youtube-iframe';

However, this will not work. It in-fact needs to explicitly mention @techassi/, so the import statement is going to be:

import VueYouTubeIframe from '@techassi/vue-youtube-iframe'

^ will work.

Vue 2

Nice plugin, thanks!

Is it possible to add Vue 2 support? Nuxt is not Vue 3 compatible, I'm pretty sure there are many people stuck on Vue 2 at the moment.

Property was accessed during render but is not defined on instance.

Hi.
I'm new to Vue.
Using the example code from readme the embed widget is empty and I get the following error in console:

[Vue warn]: Property "CZqTF006RWg" was accessed during render but is not defined on instance.

After adding app.use(YoutubeIframe), here is the view code:

<script setup lang="ts">
import { ref } from "vue";
const yt = ref(null);
const ready = ref(null)
</script>

<template>
  <main>
    <youtube-iframe
      ref="yt"
      :videoId="CZqTF006RWg"
      :playerWidth="600"
      :playerHeight="300"
      :noCookie="true"></youtube-iframe>
  </main>
</template>

Could you please help?