React-lite-yt-embed NPM

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

npm.io

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

$ yarn add react-lite-yt-embed

$ 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

import { LiteYoutubeEmbed } from 'react-lite-yt-embed';

// In your react component
<>
  <LiteYoutubeEmbed id={id}> {/* ID of YouTube video */}
  {/* You can add more props, see the description below. */}
  {/* You can also give the iframe an outer container */}
</>

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.