Nonchalantly Perusing Magazines
    Wondering what’s next for npm?Check out our public roadmap! »

    @techassi/vue-youtube-iframe
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    vue-youtube-iframe

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

    Notice

    ⚠️ The new version 1.0.6 (rewritten in Typescript) introduces the following breaking change:

    The events @ended, @playing, @paused, @buffering and @cued will no longer be emitted. Instead you should now use @state-change to catch the events when the player state changes. This better represents the behaviour of the YouTube Iframe API described here.

    New features

    • Support for typings across the board. In detail these are type declarations for the plugin itself as well as YouTube Iframe specific typings under the namespace YT from @types/youtube (See here and here).
    • API complete methods for pausing, stoping and queueing videos (See here)

    Usage

    Installation

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

    or

    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

    Contributing / Building

    Contributions and pull request are welcome!

    cd vue-youtube-iframe
    yarn install / npm install
    yarn run build / npm run build

    Install

    npm i @techassi/vue-youtube-iframe

    DownloadsWeekly Downloads

    56

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    45.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar