npmpackage.info

Gathering detailed insights and metrics for react-lite-yt-embed

Other packages similar to react-lite-yt-embed

react-lite-youtube-embed

2.4.0

A private by default, faster and cleaner YouTube embed component for React applications

lite-youtube-embed

0.3.3

A faster youtube embed.

vega-embed

6.29.0

Publish Vega visualizations as embedded web components.

iconv-lite

0.6.3

Convert character encodings in pure javascript.

Gathering detailed insights and metrics for react-lite-yt-embed

react-lite-yt-embed

React version of lite-youtube-embed iframe which render fast 🚀

1.2.7

MIT

TypeScript

237,538 1.7

Installations

npm install react-lite-yt-embed

Pull Requests

Open

0

Total

4

Closed

0

Merged

4

Issues

Open

4

Total

11

Closed

7

Releases

1.2.7

Published on 23 Jun 2021

@1.2.6 Enabled tree-shaking

1.2.6

Published on 22 Feb 2021

@1.2.4 WebP support 🚀

1.2.4

Published on 17 Dec 2020

react-lite-yt-embed@1.2.3

1.2.3

Published on 16 Dec 2020

1.2.0

Published on 13 Nov 2020

1.1.5

Published on 12 Nov 2020

View all 7 releases

Developer

kylemocode

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=10

Typescript Support

No

Node Version

12.18.3

NPM Version

6.14.6 Statistics

97 Stars

65 Commits

6 Forks

2 Watching

2 Branches

4 Contributors

Updated on 07 Jul 2024

Languages

TypeScript (72.57%)

CSS (21.57%)

HTML (3.66%)

JavaScript (2.2%)

Total Downloads

Cumulative downloads

Total Downloads

237,538

Last day

-36.8%

196

Compared to previous day

Last week

-19%

1,162

Compared to previous week

Last month

14.4%

5,502

Compared to previous month

Last year

-72.1%

40,460

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react

Dev Dependencies

@size-limit/preset-small-lib @testing-library/jest-dom @testing-library/react @types/jest @types/react @types/react-dom husky postcss react react-dom rollup-plugin-postcss size-limit tsdx tslib typescript

Versions

React Lite YouTube Embed

React component version of lite-youtube-embed scaffolded with tsdx, which focus on visual performance, rendering just like the real thing but much faster.

Download

Quick Start

Install

Please use version at least above @1.2.1, version below that is experimental and therefore may cause some runtime error.

react-lite-yt-embed

1$ yarn add react-lite-yt-embed

1$ npm install react-lite-yt-embed

Sandbox Example

Overview

Features 🎉

Preconnect YouTube domain while mouseover
Preload thumbnail image to improve user experience
WebP support, and fallback to jpg if the browser not support it
Provides many props which can customize frame behaviors
Lazy load support
Render fast, improve your web's performance

Introduction

'react-lite-yt-embed' is a react component version of popular package lite-youtube-embed, which can use in React project including SSR and CSR project. It renders just like the real iframe but way much faster.

Why is it faster than normal iframe ?

Preload the YouTube thumbnail image when page loaded. [Make image load faster]
Preconnect YouTube domain when mouse hover on the component. [Save 3 round-trip-time (DNS lookup + TCP handshake + SSL negotiation) before user click play button, making iframe load faster]

WebP Support (support after version @1.2.4)

'react-lite-yt-embed' support WebP image format, which is generally 25% - 35% smaller than jpg image, so the network request time will also decrease, making your web app render even faster.

If you use some browsers that not totally support WebP, for example, Safari, 'react-lite-yt-embed' will fallback the image to jpg automatically.

You can see WebP browser support here.

Basic Usage

1import { LiteYoutubeEmbed } from 'react-lite-yt-embed';
2
3// In your react component
4<>
5  <LiteYoutubeEmbed id={id}> {/* ID of YouTube video */}
6  {/* You can add more props, see the description below. */}
7  {/* You can also give the iframe an outer container */}
8</>

Component Props

props	required	default value	Type	Description
id	true	none	`string`	The unique id of the youtube video
defaultPlay	false	false	`boolean`	Set defaultPlay as `true` will directly show youtube iframe
isPlaylist	false	false	`boolean`	If you want to play playlist, set this as `true` and pass the playlist id
noCookie	false	true	`boolean`	Use "https://www.youtube-nocookie.com" as path or "https://www.youtube.com"
mute	false	true	`boolean`	Set the video is mute or not.
params	false	{}	`Object<string, string>`	Query string params (autoplay and mute are default query string, you do not have to set them), the value have to be a string type.
isMobile	false	false	`boolean`	Use in mobile device or not.
mobileResolution	false	'hqdefault'	'hqdefault' \| 'sddefault' \| 'maxresdefault'	You can specify the resolution of the thumbnail image on the phone (default is hqdefault, which is a lower resolution).
desktopResolution	false	'maxresdefault'	'hqdefault' \| 'sddefault' \| 'maxresdefault'	You can specify the resolution of the thumbnail image on the desktop (default is maxresdefault, which is the highest resolution).
lazyImage	false	false	`boolean`	If true, set the img loading attribute to 'lazy', default is undefined.
imageAltText	false	"YouTube's thumbnail for this video."	`string`	You can specify an alternative text description for the thumbnail image for accessibility purposes.
iframeTitle	false	"YouTube video."	`string`	You can specify a title for the iframe containing the video for accessibility purposes.

Run on local development environment

Clone the repo
npm install | yarn install
Make your change or contribution
npm run build (in root folder)
cd in example folder & run npm install
npm run build (in example folder)
npm run start (in example folder)
visit localhost:1234 in the browser

Roadmap (Welcome contribution)

Testing
CI/CD pipeline

License

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

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

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

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

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

69 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh

Score

1.7

/10

Last Scanned on 2024-11-18

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