Lite YouTube Embed 使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00239/article/details/142802436

Lite YouTube Embed 使用教程

lite-youtube-embed A faster youtube embed. 项目地址: https://gitcode.com/gh_mirrors/li/lite-youtube-embed

1. 项目介绍

Lite YouTube Embed 是一个开源项目，旨在提供比标准 YouTube 嵌入更快的视频加载体验。该项目通过自定义元素渲染 YouTube 视频，比传统的 <iframe> 嵌入方式快约 224 倍。Lite YouTube Embed 不仅提升了页面加载速度，还提供了更好的用户体验。

2. 项目快速启动

安装

你可以通过 npm 安装 Lite YouTube Embed：

npm install lite-youtube-embed

使用

在你的项目中引入 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" />
<script src="node_modules/lite-youtube-embed/src/lite-yt-embed.js"></script>

然后，在你的 HTML 中使用 <lite-youtube> 标签：

<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

示例代码

以下是一个完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lite YouTube Embed Demo</title>
    <link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" />
</head>
<body>
    <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
    <script src="node_modules/lite-youtube-embed/src/lite-yt-embed.js"></script>
</body>
</html>