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.

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

or

$ 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. |

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
• [X] CI/CD pipeline

License