DOCSEARCHbyAlgolia
Submit Docs

lite-embed

website·Indexed 30 days ago

https://lite-embed.vercel.app/

A simple, fast, and lightweight embedding library for videos from YouTube and Vimeo. Provides dedicated support and installation guides for React (@lite-embed/react) and Vue (@lite-embed/vue), including documentation on props and advanced styling.

Tokens
2.5K
Snippets
15
Records
19
Agent score
72%

What's inside lite-embed

  1. Introduction to lite-embed for YouTube and Vimeo

    lite-embed is a lightweight JavaScript embedding library designed to optimize the loading of YouTube and Vimeo videos. It improves page performance by replacing heavy <iframe> elements with a "fake" placeholder element of the same dimensions. This prevents the browser from loading numerous scripts and stylesheets required for a video thumbnail until the user actually clicks to play the video. Additionally, the library injects preload links into the document <head> upon hovering the element to optimize the loading of script domains.

  2. Install @lite-embed/vue via CDN

    For projects not using a module bundler or package manager, you can use the global UMD build hosted on unpkg.com. To use this method, add the script tag to the bottom of your HTML file. This installation requires that vue (v3) and @lite-embed/utils are also present on the page.
    <script src="https://unpkg.com/@lite-embed/vue/dist/lite-embed-vue.umd.js"></script>

  3. Install @lite-embed/vue using a package manager

    Install the @lite-embed/vue package using npm, yarn, or any other compatible package manager. Note that this library currently only supports Vue 3 and above.
    npm install @lite-embed/vue
# or
yarn add @lite-embed/vue

  4. Install @lite-embed/react

    Install the @lite-embed/react package using your preferred package manager. The library is compatible with React version 16.8 and above.
    npm install @lite-embed/react
# or
yarn add @lite-embed/react

  5. Embed YouTube and Vimeo videos in Vue

    Use the @lite-embed/vue package to embed YouTube and Vimeo videos. The components use the url-or-id attribute to specify the video URL or ID.
    <script setup lang="ts">
import { VimeoLite, YoutubeLite } from '@lite-embed/vue';
</script>

<template>
  <div>
    <vimeo-lite url-or-id="https://vimeo.com/476064230"></vimeo-lite>
    <youtube-lite
      url-or-id="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
    ></youtube-lite>
  </div>
</template>

  6. lite-embed component configuration options

    The lite-embed components for React and Vue support the following props:

    • urlOrId (React) / url-or-id (Vue): Required. The URL or ID of the YouTube or Vimeo video.
    • aspectRatio: Optional. Sets the aspect ratio of the embed. Default is 16 / 9.

  7. Vimeo and YouTube prop reference

    Both Vimeo and YouTube components share several common optional props:

    • adNetwork: Boolean. Enables ads (default: false).
    • aspectRatio: String/Number. Sets the video aspect ratio (default: 16:9). Examples: 4/3, 1/1.
    • customThumbnail: String. Path to a custom thumbnail image.
    • playerParameters: Object. Pass provider-specific embed options (Vimeo Embed Options or YouTube Player Parameters).
    • poster: String. Define a custom dimension/quality thumbnail.
    • title: String. Custom title for the <iframe> element to improve accessibility.

  8. Configure YouTube embed props

    The YouTube embed component requires a urlOrId (supporting standard URLs, shortened youtu.be links, or raw IDs) and provides options for privacy, playlists, and player customization.
    <YouTube 
  urlOrId="https://www.youtube.com/watch?v=dQw4w9WgXcQ" // Required: URL or Video ID
  noCookie={true} // Optional: Disable cookies for GDPR compliance (default is disabled)
  playlist={true} // Optional: Enable if embedding a playlist
  adNetwork={true} // Optional: Enable ads (disabled by default)
  aspectRatio="1 / 1" // Optional: Default is "16:9"
  customThumbnail="/path/to/image.jpg" // Optional: Use custom thumbnail
  poster="/path/to/poster.jpg" // Optional: Custom quality thumbnail
  title="Video Title" // Optional: Accessibility title for iframe
  playerParameters={{ rel: 0 }} // Optional: Google YouTube player parameters
  iframeProps={{ loading: 'lazy' }} // Optional: Override iframe attributes
  css={{ borderRadius: '8px' }} // Optional: Override container styles via @stitches/react
/>

  9. Embed YouTube and Vimeo videos in Vue using lite-embed

    Use the @lite-embed/vue library to embed videos. The <vimeo-lite> and <youtube-lite> components require the url-or-id prop, which accepts a full video URL or a specific video ID. You can optionally set the aspectRatio prop (defaults to 16 / 9).
    <script setup lang="ts">
import { VimeoLite, YoutubeLite } from '@lite-embed/vue';
</script>

<template>
  <div>
    <vimeo-lite url-or-id="https://vimeo.com/476064230"></vimeo-lite>
    <youtube-lite
      url-or-id="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
    ></youtube-lite>
  </div>
</template>

  10. Embed YouTube and Vimeo videos using @lite-embed/react

    Use the YoutubeLite and VimeoLite components from the @lite-embed/react package to embed videos. Both components accept a urlOrId prop, which can be either the full URL of the video or just the video ID.
    import { VimeoLite, YoutubeLite } from '@lite-embed/react';

export default function App() {
  return (
    <>
      {/* YouTube Example */}
      <YoutubeLite
        urlOrId="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
        // Alternatively, use the ID: urlOrId="dQw4w9WgXcQ"
      />

      {/* Vimeo Example */}
      <VimeoLite
        urlOrId="https://vimeo.com/476064230"
        // Alternatively, use the ID: urlOrId="476064230"
      />
    </>
  );
}

  11. Configure Vimeo embed props

    The Vimeo embed component requires a urlOrId and supports several optional configuration props for styling, accessibility, and player behavior.
    <Vimeo 
  urlOrId="https://vimeo.com/12345678" // Required: URL or Video ID
  adNetwork={true} // Optional: Enable ads (disabled by default)
  aspectRatio="4 / 3" // Optional: Default is "16:9"
  customThumbnail="/path/to/image.jpg" // Optional: Use custom thumbnail
  poster="/path/to/poster.jpg" // Optional: Custom dimension thumbnail
  title="Video Title" // Optional: Accessibility title for iframe
  playerParameters={{ autoplay: 1 }} // Optional: Vimeo embed options
  iframeProps={{ allowfullscreen: true }} // Optional: Override iframe attributes
  css={{ backgroundColor: 'red' }} // Optional: Override container styles via @stitches/react
/>

  12. YouTube specific prop options

    In addition to common props, YouTube embeds support:

    • noCookie: Boolean. Disables YouTube cookies for GDPR compliance (default: true). Set to false to enable cookies.
    • playlist: Boolean. Set to true to enable embedding of a playlist.