@abraham/lite-youtube 中文文档教程

Question

\<lite-youtube>

显示渲染 YouTube 嵌入速度更快的 Web 组件。 Paul 的 lite-youtube-embed 的 shadowDom 网络组件版本。

Features

• No dependencies; it's just a vanilla web component.
• It's fast yo.
• It's Shadow Dom encapsulated!
• It's responsive 16:9
• It's accessible via keyboard and will set ARIA via the videotitle attribute
• It's locale ready; you can set the videoplay to have a properly locale based label
• Set the start attribute to start at a particular place in a video
• You can set autoload to use Intersection Observer to load the iframe when scrolled into view.
• Loads placeholder image as WebP with a Jpeg fallback

Install

这个 web 组件是用 ES 模块构建的，并且是 在 NPM 上可用：

安装代码块：

npm i @justinribeiro/lite-youtube
# or
yarn add @justinribeiro/lite-youtube

安装后，导入到您的项目中：

import '@justinribeiro/lite-youtube';

Install with CDN

如果您想要粘贴即走版本，您可以简单地通过 CDN 加载它：

<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js">

Basic Usage

<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>

Add Video Title

<lite-youtube
  videoid="guJLfqTFfIw"
  videotitle="This is a video title"
></lite-youtube>

Change "Play" for Locale

<lite-youtube
  videoid="guJLfqTFfIw"
  videoplay="Mirar"
  videotitle="Mis hijos se burlan de mi español"
>
</lite-youtube>

Style It

组件中的高度和宽度是响应式的。

<style>
  .styleIt {
    width: 400px;
    margin: auto;
  }
</style>
<div class="styleIt">
  <lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
</div>

Set a video start time

<!-- Start at 5 seconds -->
<lite-youtube videoid="guJLfqTFfIw" start="5"></lite-youtube>

AutoLoad with IntersectionObserver

使用 Intersection Observer（如果可用）在滚动到视图时自动加载 YouTube iframe。

<lite-youtube videoid="guJLfqTFfIw" autoload> </lite-youtube>

Attributes

Web 组件允许对某些属性进行一些额外的设置 灵活性。

Name	Description	Default
videoid	The YouTube videoid	``
videotitle	The title of the video	Video
videoplay	The title of the play button (for translation)	Play
autoload	Use Intersection Observer to load iframe when scrolled into view	false
start	Set the point at which the video should start, in seconds	0