{"id":15676820,"url":"https://github.com/webistomin/vuetube","last_synced_at":"2025-10-06T01:55:24.011Z","repository":{"id":37186044,"uuid":"329827375","full_name":"webistomin/vuetube","owner":"webistomin","description":"🚀 A fast, lightweight, lazyload vue component acting as a thin layer over the YouTube Iframe Player API which renders fast  ","archived":false,"fork":false,"pushed_at":"2023-01-10T00:04:33.000Z","size":5325,"stargazers_count":14,"open_issues_count":13,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-03T02:06:27.142Z","etag":null,"topics":["vue-youtube","vue-youtube-iframe","vuetube","youtube","youtube-api","youtube-player"],"latest_commit_sha":null,"homepage":"https://vuetube-ten.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webistomin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-15T06:24:40.000Z","updated_at":"2025-01-10T05:46:51.000Z","dependencies_parsed_at":"2023-02-08T16:01:38.748Z","dependency_job_id":null,"html_url":"https://github.com/webistomin/vuetube","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fvuetube","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fvuetube/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fvuetube/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fvuetube/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webistomin","download_url":"https://codeload.github.com/webistomin/vuetube/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252790505,"owners_count":21804605,"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":["vue-youtube","vue-youtube-iframe","vuetube","youtube","youtube-api","youtube-player"],"created_at":"2024-10-03T16:05:44.693Z","updated_at":"2025-10-06T01:55:18.979Z","avatar_url":"https://github.com/webistomin.png","language":"TypeScript","funding_links":[],"categories":["Integrations [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["Integrations"],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cfont align=\"center\" size=\"120\"\u003e\n    🚀\n  \u003c/font\u003e\n  VueTube\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  Vue component acting as a thin layer over the YouTube IFrame Player API which renders fast.\n  \u003cbr/\u003e\n  \u003ca href=\"https://vuetube-ten.vercel.app/\"\u003e\u003cstrong\u003eExplore website »\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.org/package/vuetube\"\u003e\n    \u003cimg alt=\"NPM version\" src=\"https://img.shields.io/npm/v/vuetube.svg?color=%23F00\" /\u003e\n\u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/vuetube\"\u003e\n\u003cimg alt=\"NPM downloads\" src=\"https://img.shields.io/npm/dm/vuetube.svg?color=%23F00\"\u003e\n\u003c/a\u003e\n \u003ca href=\"https://github.com/webistomin/vuetube\"\u003e\n\u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/github/issues/webistomin/vuetube?color=%23F00\"\u003e\n\u003c/a\u003e\n \u003ca href=\"https://github.com/webistomin/vuetube\"\u003e\n  \u003cimg alt=\"GitHub last commit\" src=\"https://img.shields.io/github/last-commit/webistomin/vuetube?color=%23F00\"\u003e\n\u003c/a\u003e\n \u003ca href=\"https://github.com/webistomin/vuetube\"\u003e\n    \u003cimg alt=\"npm type definitions\" src=\"https://img.shields.io/npm/types/vuetube?color=%23F00\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/result?p=vuetube\"\u003e\n  \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/vuetube?color=%23F00\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#key-features-\"\u003eKey Features\u003c/a\u003e •\n  \u003ca href=\"#installation-\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"#documentation-\"\u003eDocumentation\u003c/a\u003e •\n  \u003ca href=\"#faq-%EF%B8%8F\"\u003eFAQ\u003c/a\u003e •\n  \u003ca href=\"#browsers-support-\"\u003eBrowsers support\u003c/a\u003e •\n  \u003ca href=\"#license-\"\u003eLicense\u003c/a\u003e  •\n  \u003ca href=\"#inspiration-\"\u003eInspiration\u003c/a\u003e  •\n  \u003ca href=\"#support-the-project-\"\u003eSupport the project\u003c/a\u003e  •\n  \u003ca href=\"#contributing-\"\u003eContributing\u003c/a\u003e\n\u003c/p\u003e\n\n## Key Features ✨\n\n* **Small** `~2KB` js (minified and gzipped) and `~1KB` css\n* **No dependencies**\n* **Lazy load** support\n* **Webp support**, and fallback to `jpg` if the browser doesn't support it\n* **Render fast**, improve your web's performance  \n* Built with **a11y** in mind\n\n## Installation  ⚙️\n\n**npm**\n```shell\n# Vue 2\nnpm install vuetube\n\n# Vue 3\nnpm install vuetube@next\n```\n\n**yarn**\n```shell\n# Vue 2\nyarn add vuetube\n\n# Vue 3\nyarn add vuetube@next\n```\n\n**Install plugin**\n```js\n/**\n * Vue 2\n */\nimport Vue from 'vue'\nimport VueTube from 'vuetube';\nimport 'vuetube/dist/vuetube.css'\n\nVue.use(VueTube)\n\n/**\n * Vue 3\n */\nimport { createApp } from 'vue'\nimport VueTube from 'vuetube';\nimport 'vuetube/dist/vuetube.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(VueTube)\n```\n\nor\n\n**Install component**\n```js\n/**\n * Vue 2\n */\nimport Vue from 'vue'\nimport { VueTube } from 'vuetube';\nimport 'vuetube/dist/vuetube.css'\n\nVue.component('VueTube', VueTube)\n\n/**\n * Vue 3\n */\nimport { createApp } from 'vue'\nimport { VueTube } from 'vuetube';\nimport 'vuetube/dist/vuetube.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.component('VueTube', VueTube)\n```\n\n\n## Documentation 🤗\n\nBrowse [online documentation here](https://vuetube-ten.vercel.app/)\n\n### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      Prop\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Type\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Description\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Default value\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003evideoId\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003estring\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      The ID of YouTube video (required)\n    \u003c/td\u003e\n    \u003ctd\u003e\n      -\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eisPlaylist\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eboolean\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Should embed a playlist of several videos\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003efalse\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003easpectRatio\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003enumber\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      The aspect ratio for iframe\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003e16 / 9\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eenableCookies\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eboolean\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Change video host to \u003ccode\u003ewww.youtube.com\u003c/code\u003e. By default, video loaded from \u003ccode\u003ehttps://www.youtube-nocookie.com\u003c/code\u003e.\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003efalse\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eplayerVars\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eobject\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://developers.google.com/youtube/player_parameters#Parameters\"\u003eParameters\u003c/a\u003e that are available in the YouTube embedded player.\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003e{}\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003edisableWarming\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eboolean\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Disable warming up connections to origins that are in the critical path on component hover.\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003efalse\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003edisableWebp\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eboolean\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Disable webp thumbnail.\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003efalse\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eimageAlt\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003estring\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Alt attribute for image\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003e''\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eimageLoading\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003estring\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://caniuse.com/loading-lazy-attr\"\u003eLoading attribute\u003c/a\u003e for image\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003e'lazy'\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eresolution\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003estring\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://stackoverflow.com/a/18400445/13374604\"\u003eThumbnail resolution\u003c/a\u003e from YouTube API. \n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003e'sddefault'\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003ebuttonLabel\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003estring\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Aria-label attribute for button\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003e'Play video'\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eiframeTitle\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003estring\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Title attribute for iframe\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003e''\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ccode\u003eiframeAllow\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003estring\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      Allow attribute for iframe\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003ccode\u003e'accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture'\u003c/code\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Events\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eEvent name\u003c/td\u003e\n    \u003ctd\u003eDescription\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eplayer:play\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThe user clicked on the play button\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eplayer:load\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eIframe has been loaded\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eplayer:ready\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThis event fires whenever a player has finished loading and is ready to begin receiving API calls. \u003cbr/\u003e\u003cbr/\u003e \u003cstrong\u003eMake sure you pass \u003ccode\u003eenablejsapi: 1\u003c/code\u003e to the \u003ccode\u003eplayerVars\u003c/code\u003e props object\u003c/strong\u003e \u003cbr/\u003e\u003cbr/\u003e This event is similar to \u003ccode\u003eonReady\u003c/code\u003e event from \u003ca href=\"https://developers.google.com/youtube/iframe_api_reference#Events\"\u003eYoutube API documentation\u003c/a\u003e.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eplayer:statechange\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThis event fires whenever the player's state changes. \u003cbr/\u003e\u003cbr/\u003e \u003cstrong\u003eMake sure you pass \u003ccode\u003eenablejsapi: 1\u003c/code\u003e to the \u003ccode\u003eplayerVars\u003c/code\u003e props object\u003c/strong\u003e \u003cbr/\u003e\u003cbr/\u003e This event is similar to \u003ccode\u003eonStateChange\u003c/code\u003e event from \u003ca href=\"https://developers.google.com/youtube/iframe_api_reference#Events\"\u003eYoutube API documentation\u003c/a\u003e.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eplayer:playbackqualitychange\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThis event fires whenever the video playback quality changes. \u003cbr/\u003e\u003cbr/\u003e \u003cstrong\u003eMake sure you pass \u003ccode\u003eenablejsapi: 1\u003c/code\u003e to the \u003ccode\u003eplayerVars\u003c/code\u003e props object\u003c/strong\u003e \u003cbr/\u003e\u003cbr/\u003e This event is similar to \u003ccode\u003eonPlaybackQualityChange\u003c/code\u003e event from \u003ca href=\"https://developers.google.com/youtube/iframe_api_reference#Events\"\u003eYoutube API documentation\u003c/a\u003e.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eplayer:playbackratechange\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThis event fires whenever the video playback rate changes.  \u003cbr/\u003e\u003cbr/\u003e \u003cstrong\u003eMake sure you pass \u003ccode\u003eenablejsapi: 1\u003c/code\u003e to the \u003ccode\u003eplayerVars\u003c/code\u003e props object\u003c/strong\u003e \u003cbr/\u003e\u003cbr/\u003e This event is similar to \u003ccode\u003eonPlaybackRateChange\u003c/code\u003e event from \u003ca href=\"https://developers.google.com/youtube/iframe_api_reference#Events\"\u003eYoutube API documentation\u003c/a\u003e.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eplayer:error\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThis event fires if an error occurs in the player. \u003cbr/\u003e\u003cbr/\u003e \u003cstrong\u003eMake sure you pass \u003ccode\u003eenablejsapi: 1\u003c/code\u003e to the \u003ccode\u003eplayerVars\u003c/code\u003e props object\u003c/strong\u003e \u003cbr/\u003e\u003cbr/\u003e This event is similar to \u003ccode\u003eonError\u003c/code\u003e event from \u003ca href=\"https://developers.google.com/youtube/iframe_api_reference#Events\"\u003eYoutube API documentation\u003c/a\u003e.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eplayer:apichange\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThis event is fired to indicate that the player has loaded (or unloaded) a module with exposed API methods. \u003cbr/\u003e\u003cbr/\u003e \u003cstrong\u003eMake sure you pass \u003ccode\u003eenablejsapi: 1\u003c/code\u003e to the \u003ccode\u003eplayerVars\u003c/code\u003e props object\u003c/strong\u003e \u003cbr/\u003e\u003cbr/\u003e This event is similar to \u003ccode\u003eonApiChange\u003c/code\u003e event from \u003ca href=\"https://developers.google.com/youtube/iframe_api_reference#Events\"\u003eYoutube API documentation\u003c/a\u003e.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## FAQ 🗯️\n\n### How to get access to player API?\n\nYou need to pass \u003ccode\u003eenablejsapi: 1\u003c/code\u003e to the \u003ccode\u003eplayerVars\u003c/code\u003e props object. Then subscribe on \u003ccode\u003eplayer:ready\u003c/code\u003e event.\n\n```vue\n  \u003ctemplate\u003e\n    \u003cvue-tube @player:ready=\"onPlayerReady\"\u003e\u003c/vue-tube\u003e\n  \u003c/template\u003e\n\n  \u003cscript\u003e\n    export default {\n      data() {\n        return {\n          playerInstance: null,\n        }\n      },\n      \n      methods: {\n        onPlayerReady(event) {\n          this.playerInstance = event.target\n        }\n      }\n    }\n  \u003c/script\u003e\n```\n\nNow you have a player instance in the `playerInstance`. You can do whatever you want with video. \n\n`this.playerInstance.playVideo()`, `this.playerInstance.pauseVideo()` etc. All methods can be found [here](https://developers.google.com/youtube/iframe_api_reference#Playback_controls).\n\n### How to use my play button?\n\nYou can pass your button through the `icon` slot.\n\n```vue\n  \u003ctemplate\u003e\n    \u003cvue-tube\u003e\n      \u003ctemplate #icon\u003e\n        \u003csvg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"48\"\n          height=\"48\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        \u003e\n          \u003cpath\n            fill=\"#fff\"\n            d=\"M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z\"\n          /\u003e\n        \u003c/svg\u003e\n      \u003c/template\u003e\n    \u003c/vue-tube\u003e\n  \u003c/template\u003e\n```\n\n### How to use my thumbnail?\n\nYou can pass your thumbnail through the `thumbnail` slot.\n\n```vue\n  \u003ctemplate\u003e\n    \u003cvue-tube\u003e\n      \u003ctemplate #thumbnail\u003e\n        \u003cimg src=\"#\" alt=\"\"\u003e\n      \u003c/template\u003e\n    \u003c/vue-tube\u003e\n  \u003c/template\u003e\n```\n\n## Browsers support 🌎\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eiOS Safari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png\" alt=\"Samsung\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eSamsung | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eOpera | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/yandex/yandex_48x48.png\" alt=\"Yandex\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eYandex |\n| --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- |\n| IE11, Edge 80 | 60+ | 60+ | 10+ | 10+ | 12+ | 50+ | 14.4+\n\n## License 📄\n\n### [MIT](https://github.com/webistomin/vuetube/blob/master/LICENSE)\n\n## Inspiration 👏\n\nVuetube is a vue component version of the popular package [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed).\n\n## Support the project ⭐\n\nIf you feel awesome and want to support me in a small way, please consider starring and sharing the repo!\n\n## Contributing 🎉\n\nFound a bug? Missing a specific feature?\nYour contributions are always welcome! Please have a look at the [contribution guidelines](https://github.com/webistomin/vuetube/blob/master/CONTRIBUTING.md) first.\n\n## Contributors ❤️\n\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://webistom.in/en\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/30475699?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlexey Istomin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#a11y-webistomin\" title=\"Accessibility\"\u003e️️️️♿️\u003c/a\u003e \u003ca href=\"https://github.com/webistomin/vuetube/commits?author=webistomin\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/webistomin/vuetube/commits?author=webistomin\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-webistomin\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebistomin%2Fvuetube","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebistomin%2Fvuetube","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebistomin%2Fvuetube/lists"}