Installations

npm install vue-lite-youtube-embed-test

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

16.17.1

NPM Version

8.15.0 Pull Requests

Open

0

Total

5

Closed

0

Merged

5

Issues

Open

6

Total

15

Closed

9

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

wobsoriano

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

View All 4 Contributors

Package Meta Information

Latest Version

0.1.5

Package Id

vue-lite-youtube-embed-test@0.1.5

Unpacked Size

22.11 kB

Size

6.88 kB

File Count

7

NPM Version

8.15.0

Node Version

16.17.1

Published on

Jan 18, 2023

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

vue-demi

Peer Dependencies

2

@vue/composition-api vue

Dev Dependencies

10

@antfu/eslint-config @vitejs/plugin-vue bumpp eslint taze tsup typescript vite vue vue-tsc

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<script setup>
2import LiteYouTubeEmbed from 'vue-lite-youtube-embed'
3import { Fragment } from 'vue-frag'
4import 'vue-lite-youtube-embed/style.css'
5</script>
6
7<template>
8  <LiteYouTubeEmbed
9    id="dQw4w9WgXcQ"
10    title="Rick Astley - Never Gonna Give You Up (Official Music Video)"
11  />
12</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.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-07-07

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