使用官方嵌入式代码（最推荐、最简单）

这是最直接、最官方的方法，YouTube 提供了生成代码的功能，可以确保你的视频在各种设备上都能良好地播放。

网站嵌入youtube视频
（图片来源网络，侵删）

步骤 1：在 YouTube 上找到视频并获取嵌入代码

  1. 打开你想要嵌入的 YouTube 视频页面。
  2. 点击视频下方的 “分享” (Share) 按钮。
  3. 在弹出的窗口中,点击 “嵌入” (Embed)。
  4. 你会看到一个代码框,里面就是 <iframe> 嵌入代码。
  5. 你可以选择想要的视频尺寸,比如推荐的尺寸或自定义尺寸。
  6. 复制 这段代码。

步骤 2：将代码粘贴到你的网站 HTML 中

将复制的代码直接粘贴到你想要显示视频的网页 HTML 文件中的 <body> 标签内。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">嵌入 YouTube 视频</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
            padding: 20px;
        }
        .video-container {
            max-width: 800px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h1>欢迎观看我们的视频</h1>
    <div class="video-container">
        <!-- 将你复制的 YouTube 嵌入代码粘贴在这里 -->
        <iframe 
            width="560" 
            height="315" 
            src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
            title="YouTube video player" 
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen>
        </iframe>
    </div>
</body>
</html>

代码参数说明

  • src: 视频的核心链接，格式通常是 https://www.youtube.com/embed/视频ID。
  • width 和 height: 视频的宽度和高度，使用 width: 100% 和一个固定的 height（height: 0; padding-bottom: 56.25%;）可以实现响应式布局（见下文）。: <iframe> 的标题，对屏幕阅读器等辅助技术很重要，有助于网站的无障碍性。
  • frameborder="0": 移除 iframe 默认的边框。
  • allow: 一个分号分隔的列表，指定允许在视频播放器上执行的操作。
    • accelerometer: 允许设备方向数据。
    • autoplay: 允许自动播放，注意，很多浏览器（特别是移动端）会忽略这个属性，除非视频是静音的。
    • clipboard-write: 允许将视频链接复制到剪贴板。
    • encrypted-media: 允许播放受版权保护的内容。
    • gyroscope: 允许陀螺仪数据。
    • picture-in-picture: 允许画中画模式。
    • allowfullscreen: 允许全屏播放，这是一个非常重要的属性。

实现响应式布局（推荐）

如果视频宽度设置为 560px，在小屏幕手机上就会溢出，为了让视频自适应容器宽度，我们可以使用一个流行的 CSS 技巧。

原理： 通过设置容器的 padding-bottom 为一个百分比来创建一个固定宽高比的“盒子”（16:9 的视频宽高比是 56.25%）。

网站嵌入youtube视频
（图片来源网络，侵删）

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">响应式 YouTube 视频</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
            padding: 20px;
        }
        .video-wrapper {
            position: relative; /* 作为定位上下文 */
            padding-bottom: 56.25%; /* 16:9 的宽高比 (9 / 16 = 0.5625) */
            height: 0;
            overflow: hidden;
            max-width: 100%;
        }
        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    </style>
</head>
<body>
    <h1>响应式视频示例</h1>
    <p>尝试调整浏览器窗口大小，看看视频如何自适应。</p>
    <div class="video-wrapper">
        <iframe 
            src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
            title="YouTube video player" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen>
        </iframe>
    </div>
</body>
</html>

关键点：

  • 我们移除了 <iframe> 上的 width 和 height 属性。
  • 外层 .video-wrapper div 设置了 padding-bottom: 56.25%，这会根据其父容器的宽度来计算高度，从而形成 16:9 的比例。
  • <iframe> 使用绝对定位 position: absolute 填满整个 .video-wrapper。

使用 YouTube JavaScript API（高级）

如果你需要对视频播放进行更精细的控制（在视频播放到特定时间时触发某个事件、自定义播放按钮、获取播放状态等），你需要使用 YouTube 的 JavaScript API。

步骤 1：引入 API 库

在 HTML 的 <head> 或 <body> 底部引入 YouTube IFrame Player API。

网站嵌入youtube视频
（图片来源网络，侵删）
<script src="https://www.youtube.com/iframe_api"></script>

步骤 2：创建一个 <div> 作为视频播放器容器

这个 div 将被 API 用来替换成 <iframe>。

<div id="player"></div>

步骤 3：编写 JavaScript 代码来初始化播放器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">YouTube API 示例</title>
    <style>
        #player {
            width: 640px;
            height: 360px;
        }
    </style>
</head>
<body>
    <h1>YouTube JavaScript API 示例</h1>
    <div id="player"></div>
    <!-- 1. 引入 API -->
    <script src="https://www.youtube.com/iframe_API"></script>
    <!-- 2. 创建一个函数来准备 API -->
    <script>
        // 3. 这段代码会在 API 加载完成后执行
        function onYouTubeIframeAPIReady() {
            // 创建一个播放器实例
            var player = new YT.Player('player', {
                // 视频ID
                videoId: 'dQw4w9WgXcQ', 
                // 播放器高度和宽度
                width: '640',
                height: '360',
                // 播放器参数
                playerVars: {
                    'playsinline': 1, // 在 iOS 内联播放
                    'controls': 1,    // 显示控制器
                    'rel': 0,         // 不显示相关视频
                    'modestbranding': 1 // 简化 YouTube 品牌标识
                },
                // 事件监听器
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
        // 当播放器准备就绪时触发
        function onPlayerReady(event) {
            console.log('播放器已准备就绪！');
            // event.target.playVideo(); // 可以在这里自动播放
        }
        // 当播放器状态改变时触发 (开始播放、暂停、结束等)
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING) {
                console.log('视频正在播放');
            }
            if (event.data == YT.PlayerState.PAUSED) {
                console.log('视频已暂停');
            }
            if (event.data == YT.PlayerState.ENDED) {
                console.log('视频已播放完毕');
            }
        }
    </script>
</body>
</html>

总结与最佳实践

方法 优点 缺点 适用场景
官方嵌入代码 最简单、最快速，官方支持，兼容性好。 功能有限，无法进行复杂交互。 绝大多数网站，只需要简单展示视频的地方。
响应式布局 保证了移动端体验，视频不会溢出屏幕。 需要额外的 CSS 代码。 所有现代网站，是方法一的必要补充。
JavaScript API 功能强大，可完全控制视频播放行为。 实现复杂，需要懂 JavaScript，代码量多。 需要自定义播放器、与网站其他功能深度交互的高级应用。

给新手的建议：

  1. 从方法一开始，复制 YouTube 官方提供的代码，直接粘贴到你的网站里。
  2. 务必加上方法二的响应式 CSS，让你的网站在手机上看起来更专业。
  3. 只有当你发现“我需要根据视频播放来做点什么”时，再考虑学习方法三的 JavaScript API。