使用Bootstrap 5打造精美视频播放网站（附带播放列表代码）

使用Bootstrap 5打造精美视频播放网站

想要快速搭建一个外观精美、功能齐全的视频播放网站？Bootstrap 5 将是你的不二之选！

以下是用 Bootstrap 5 构建视频播放网站的基本代码，包含播放器和播放列表功能：

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>视频播放网站</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css'>
</head>
<body>
  <div class='container'>
    <h1 class='mt-5'>视频播放网站</h1>

    <div class='embed-responsive embed-responsive-16by9 mt-3'>
      <iframe class='embed-responsive-item' src='https://www.youtube.com/embed/VIDEO_ID' allowfullscreen></iframe>
    </div>

    <div class='mt-5'>
      <h2>播放列表</h2>
      <ul class='list-group'>
        <li class='list-group-item'>视频1</li>
        <li class='list-group-item'>视频2</li>
        <li class='list-group-item'>视频3</li>
      </ul>
    </div>
  </div>

  <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js'></script>
</body>
</html>

代码说明:

引入 Bootstrap 5 样式表：<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css'>
使用 embed-responsive 类创建响应式视频播放器
使用 list-group 类创建播放列表
将 VIDEO_ID 替换为实际的 YouTube 视频 ID

你可以根据自己的需要调整样式和布局，例如添加视频标题、描述、缩略图等，打造独一无二的视频网站！