Gathering detailed insights and metrics for vue-lite-youtube-embed
Gathering detailed insights and metrics for vue-lite-youtube-embed
A private by default, faster and cleaner YouTube embed component for Vue applications.
Installations
npm install vue-lite-youtube-embedDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.9.0
NPM Version
10.1.0
Releases
Unable to fetch releases
Languages
5
TypeScript
CSS
Vue
HTML
JavaScript
TypeScript (71.22%)
CSS (17.65%)
Vue (7.38%)
HTML (3.18%)
JavaScript (0.57%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
63 Stars
104 Commits
7 Forks
3 Watchers
3 Branches
4 Contributors
Updated on Mar 04, 2025
Maintainers
1
Package Meta Information
Latest Version
1.2.4
Package Id
vue-lite-youtube-embed@1.2.4
Unpacked Size
5.03 MB
Size
1.03 MB
File Count
13
NPM Version
10.1.0
Node Version
20.9.0
Published on
Mar 21, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
vue-lite-youtube-embed
A private by default, faster and cleaner YouTube embed component for Vue applications.
Vue port of React Lite YouTube Embed. Provide videos with a supercharged focus on visual performance. An "Adaptive Loading" way to handle iframes for YouTube.
Installation
1npm install vue-lite-youtube-embed
Usage
1<script setup> 2import LiteYouTubeEmbed from 'vue-lite-youtube-embed' 3import 'vue-lite-youtube-embed/style.css' 4</script> 5 6<template> 7 <LiteYouTubeEmbed 8 id="dQw4w9WgXcQ" 9 title="Rick Astley - Never Gonna Give You Up (Official Music Video)" 10 /> 11</template>
Click here for Vue 2 usage
1npm install vue-lite-youtube-embed vue-frag
1// src/main.ts 2import Vue from 'vue' 3import { Fragment } from 'vue-frag' 4import App from './App.vue' 5 6Vue.component('Fragment', Fragment) 7 8new Vue({ 9 render: h => h(App), 10}).$mount('#app')
1<script setup> 2import LiteYouTubeEmbed from 'vue-lite-youtube-embed' 3import 'vue-lite-youtube-embed/style.css' 4</script> 5 6<template> 7 <LiteYouTubeEmbed 8 id="dQw4w9WgXcQ" 9 title="Rick Astley - Never Gonna Give You Up (Official Music Video)" 10 /> 11</template>
Props
Only two props are required to work: id from the YouTube you want to render and title
| Prop | Type | Description |
|---|---|---|
| id | string | Id of the video or playlist |
| title | string | Video title. Always provide a title for iFrames: https://dequeuniversity.com/tips/provide-iframe-titles Help the web be accessible ;) #a11y |
| announce | string | Default: Watch. This will be passed to the button in order to be announced to the final user as in Clickable Watch, ${title}, button , customize to match your own language #a11y #i18n |
| aspectHeight | number | Default: 9. Use this optional prop if you want a custom aspect-ratio. Please be aware of aspect height and width relation and also any custom CSS you are using. |
| aspectWidth | number | Default: 16. Use this optional prop if you want a custom aspect-ratio. Please be aware of aspect height and width relation and also any custom CSS you are using. |
| activeClass | string | Pass the string class for the active state |
| adNetwork | boolean | Default: false To preconnect or not to doubleclick addresses called by YouTube iframe (the adnetwork from Google) |
| cookie | boolean | Default: false Connect to YouTube via the Privacy-Enhanced Mode using https://www.youtube-nocookie.com You should opt-in to allow cookies |
| iframeClass | string | Pass the string class for the own iFrame |
| muted | boolean | If the video has sound or not. Required autoplay true to work |
| params | string | any params you want to pass to the URL in the iFrame. Two important things to notice: You can assume you just need to add the params, we already setup for you, so you should write start=1150 and not ?start=1150 or &start=1150. You can place more params but it will need to fully form: start=1150&other=value&another=value. First, when you share a YouTube url the param of time is just t, but the embed needs start. |
| playerClass | string | Pass the string class for the player, once you can customize it |
| playlist | boolean | Use true when your id be from a playlist |
| playlistCoverId | string | The ids for playlists did not bring the cover in a pattern to render so you'll need pick up a video from the playlist (or in fact, whatever id) and use to render the cover. There's a programmatic way to get the cover from YouTube API v3 but the aim of this component is do not make any another call and reduce requests and bandwidth usage as much as possibe |
| poster | string. One of default mqdefault hqdefault sddefault maxresdefault | Defines the image size to call on first render as poster image. See: https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api |
| rel | string | Default preload. allows for prefetch or preload of the link url |
| thumbnail | string | Pass an optional image url to override the default poster and set a custom poster image |
| webp | boolean | Default false. When set, uses the WebP format for poster images |
| wrapperClass | string | Pass the string class that wraps the iFrame |
Events
- iframeAdded - Fired when iframe is added.
Methods
1<script setup> 2import { ref } from 'vue' 3import LiteYouTubeEmbed from 'vue-lite-youtube-embed' 4import 'vue-lite-youtube-embed/style.css' 5 6const iframe = ref(null) 7 8iframe.value?.stopVideo() 9iframe.value?.pauseVideo() 10iframe.value?.playVideo() 11</script> 12 13<template> 14 <LiteYouTubeEmbed 15 id="dQw4w9WgXcQ" 16 ref="iframe" 17 title="Rick Astley - Never Gonna Give You Up (Official Music Video)" 18 /> 19</template>
Credits
- react-lite-youtube-embed - A private by default, faster and cleaner YouTube embed component for React applications.
- vue-demi - Creates Universal Library for Vue 2 & 3.
- lite-youtube-embed - A faster youtube embed.
License
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
22 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
- Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
- Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
- Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-f9xv-q969-pqx4
Score
1.7
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More