{"id":20406303,"url":"https://github.com/techassi/vue-youtube-iframe","last_synced_at":"2025-06-18T13:34:34.275Z","repository":{"id":42562744,"uuid":"301414742","full_name":"Techassi/vue-youtube-iframe","owner":"Techassi","description":"Integrate the YouTube Iframe player into your Vue 3 app.","archived":false,"fork":false,"pushed_at":"2022-08-01T10:25:01.000Z","size":179,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T15:06:01.024Z","etag":null,"topics":["iframe","typescript","vue-youtube-iframe","vue3","vuejs","youtube","youtube-iframe-api","youtube-player"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@techassi/vue-youtube-iframe","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Techassi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-05T13:17:05.000Z","updated_at":"2024-10-27T14:36:16.000Z","dependencies_parsed_at":"2022-08-25T18:40:54.943Z","dependency_job_id":null,"html_url":"https://github.com/Techassi/vue-youtube-iframe","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Techassi%2Fvue-youtube-iframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Techassi%2Fvue-youtube-iframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Techassi%2Fvue-youtube-iframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Techassi%2Fvue-youtube-iframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Techassi","download_url":"https://codeload.github.com/Techassi/vue-youtube-iframe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586235,"owners_count":21128997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["iframe","typescript","vue-youtube-iframe","vue3","vuejs","youtube","youtube-iframe-api","youtube-player"],"created_at":"2024-11-15T05:16:24.567Z","updated_at":"2025-04-12T15:06:13.922Z","avatar_url":"https://github.com/Techassi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚠️ Notice\n\nThis plugin is deprecated. Please use the new and improved [@vue-youtube/core](https://github.com/vue-youtube/vue-youtube) plugin.\n\n# vue-youtube-iframe\n\nThis plugin makes it easy to integrate the YouTube Iframe API into your Vue app. This plugin is Vue V3 compatible.\n\n## Usage\n\n### Installation\n\n```shell\nnpm install @techassi/vue-youtube-iframe --save\n```\n\nor\n\n```shell\nyarn add @techassi/vue-youtube-iframe\n```\n\n### Basic usage\n\n`main.js` / `main.ts`\n\n```js\nimport { createApp } from 'vue';\nimport App from './App.vue';\n\nimport YoutubeIframe from '@techassi/vue-youtube-iframe';\n\ncreateApp(App).use(YoutubeIframe).mount('#app');\n```\n\n`YourComponent.vue`\n\n```vue\n\u003ctemplate\u003e\n    \u003cyoutube-iframe :video-id=\"YT_VIDEO_ID\"\u003e\u003c/youtube-iframe\u003e\n\u003c/template\u003e\n```\n\n### Advanced usage\n\n`YourComponent.vue`\n\n```vue\n\u003ctemplate\u003e\n    \u003cyoutube-iframe\n        :video-id=\"YT_VIDEO_ID\"\n        :player-width=\"WIDTH\"\n        :player-height=\"HEIGHT\"\n        :no-cookie=\"TRUE / FALSE\"\n        :player-parameters=\"YT_PLAYER_PARAMS\"\n        @EVENT=\"CALLBACK\"\n    \u003e\u003c/youtube-iframe\u003e\n\u003c/template\u003e\n```\n\n### Typings\n\nVue currently doesn't support typings when using a component in a SFC and accessing it via `ref` / `this.$refs`. There\nis a way to bring in typings when using `ref`. Please note: This isn't the most elegant solution.\n\n```vue\n\u003ctemplate\u003e\n    \u003cyoutube-iframe :video-id=\"YT_VIDEO_ID\" ref=\"yt\"\u003e\u003c/youtube-iframe\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent } from 'vue';\nimport { Player } from '@techassi/vue-youtube-iframe';\n\nexport default defineComponent({\n    name: 'App',\n    mounted() {\n        const player = this.$refs.yt as typeof Player;\n        // Variable player now has typings\n    },\n});\n\u003c/script\u003e\n```\n\n### Available props\n\n-   `:videoId / :video-id`: Specify the YT video id (e.g. `dQw4w9WgXcQ`)\n-   `:playerWidth / :player-width`: Specify the player's width in pixels\n-   `:playerHeight / :player-height`: Specify the player's height in pixels\n-   `:noCookie / :no-cookie`: If set to `true` the host will be set to `https://www.youtube-nocookie.com`\n-   `:playerParameters / :player-parameters`: Set player parameters, see [here](#available-player-parameters)\n\n### Available player parameters\n\nFor the available player parameters see [here](https://developers.google.com/youtube/player_parameters#Parameters)\n\n### Available Events\n\n```\n@ready, @error, @state-change\n```\n\nFor detailed event information check [here](https://developers.google.com/youtube/iframe_api_reference#Events)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechassi%2Fvue-youtube-iframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechassi%2Fvue-youtube-iframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechassi%2Fvue-youtube-iframe/lists"}