📅 最后修改于: 2023-12-03 15:06:06.890000 🧑 作者: Mango
在网页设计中，视频通常是一个非常重要的组成部分。而其中，YouTube视频作为最受欢迎的视频共享平台之一，常常被网页设计人员嵌入到网页中。本文介绍如何创建一个响应式的YouTube嵌入式生成器，以供程序员使用。
在开始本文之前，你需要具备基本的HTML和CSS的知识。同时，我们还会使用到Bootstrap框架来创建一个响应式的Web页面。如果你对这些内容不是很熟悉，那么可以查看以下文章：
首先，我们需要创建一个HTML文件，然后添加必要的结构和HTML标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YouTube嵌入生成器响应式</title>
<!-- 引入Bootstrap框架 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="text-center">YouTube嵌入生成器响应式</h1>
<!-- 添加表单 -->
</div>
</div>
</div>
<!-- 引入Bootstrap框架JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
在上述HTML代码中，我们引入了Bootstrap框架，并创建了一个包含输入表单的容器。
<form id="youtube-form">
<div class="form-group">
<label for="video-id">视频ID：</label>
<input type="text" class="form-control" id="video-id" name="video-id" required>
<small class="form-text text-muted">在YouTube中找到视频ID。</small>
</div>
<div class="form-group">
<label for="width">宽度：</label>
<input type="number" class="form-control" id="width" name="width" value="560" required>
</div>
<div class="form-group">
<label for="height">高度：</label>
<input type="number" class="form-control" id="height" name="height" value="315" required>
</div>
<div class="form-group">
<label for="autoplay">自动播放：</label>
<input type="checkbox" name="autoplay" id="autoplay" value="true">
</div>
<div class="form-group">
<label for="start-time">起始时间（秒）：</label>
<input type="number" class="form-control" id="start-time" name="start-time" placeholder="可选">
</div>
<button class="btn btn-primary btn-block">生成代码</button>
</form>
在输入表单中，我们创建了以下项：
我们使用JavaScript来处理表单数据，并生成嵌入的YouTube代码。在这个示例中，我们使用了示例代码来包含所有的参数。
<script>
// 在表单提交时调用函数。
document.getElementById('youtube-form').addEventListener('submit', function(event) {
event.preventDefault();
// 获取表单数据
let videoId = document.getElementById('video-id').value;
let width = document.getElementById('width').value;
let height = document.getElementById('height').value;
let autoplay = document.getElementById('autoplay').checked;
let startTime = document.getElementById('start-time').value || 0;
// 确定YouTube播放器的参数
let params = {
autoplay: autoplay ? 1 : 0,
start: startTime
};
// 生成嵌入代码
let embedUrl = 'https://www.youtube.com/embed/' + videoId + '?';
for (let prop in params) {
embedUrl += prop + '=' + params[prop] + '&';
}
let embedCode = '<iframe width="' + width + '" height="' + height + '" src="' + embedUrl + '" title="YouTube video player" frameborder="0" allowfullscreen></iframe>';
// 显示嵌入代码
document.getElementById('embed-code').innerText = embedCode;
});
</script>
在JavaScript代码中，我们添加了事件监听器来捕获表单提交事件，在事件处理程序中获取表单数据并生成嵌入代码。嵌入代码显示在一个类似文本区的HTML元素中，如下所示：
<div class="form-group">
<label for="start-time">起始时间（秒）：</label>
<input type="number" class="form-control" id="start-time" name="start-time" placeholder="可选">
</div>
<button class="btn btn-primary btn-block">生成代码</button>
<div class="form-group">
<label for="embed-code">嵌入代码：</label>
<textarea id="embed-code" class="form-control" rows="4" readonly></textarea>
<small class="form-text text-muted">将此代码复制并粘贴到您的网页中。</small>
</div>
最后，你可以看到完整的HTML文件代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YouTube嵌入生成器响应式</title>
<!-- 引入Bootstrap框架 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="text-center">YouTube嵌入生成器响应式</h1>
<form id="youtube-form">
<div class="form-group">
<label for="video-id">视频ID：</label>
<input type="text" class="form-control" id="video-id" name="video-id" required>
<small class="form-text text-muted">在YouTube中找到视频ID。</small>
</div>
<div class="form-group">
<label for="width">宽度：</label>
<input type="number" class="form-control" id="width" name="width" value="560" required>
</div>
<div class="form-group">
<label for="height">高度：</label>
<input type="number" class="form-control" id="height" name="height" value="315" required>
</div>
<div class="form-group">
<label for="autoplay">自动播放：</label>
<input type="checkbox" name="autoplay" id="autoplay" value="true">
</div>
<div class="form-group">
<label for="start-time">起始时间（秒）：</label>
<input type="number" class="form-control" id="start-time" name="start-time" placeholder="可选">
</div>
<button class="btn btn-primary btn-block">生成代码</button>
<div class="form-group">
<label for="embed-code">嵌入代码：</label>
<textarea id="embed-code" class="form-control" rows="4" readonly></textarea>
<small class="form-text text-muted">将此代码复制并粘贴到您的网页中。</small>
</div>
</form>
</div>
</div>
</div>
<!-- 引入Bootstrap框架JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
// 在表单提交时调用函数。
document.getElementById('youtube-form').addEventListener('submit', function(event) {
event.preventDefault();
// 获取表单数据
let videoId = document.getElementById('video-id').value;
let width = document.getElementById('width').value;
let height = document.getElementById('height').value;
let autoplay = document.getElementById('autoplay').checked;
let startTime = document.getElementById('start-time').value || 0;
// 确定YouTube播放器的参数
let params = {
autoplay: autoplay ? 1 : 0,
start: startTime
};
// 生成嵌入代码
let embedUrl = 'https://www.youtube.com/embed/' + videoId + '?';
for (let prop in params) {
embedUrl += prop + '=' + params[prop] + '&';
}
let embedCode = '<iframe width="' + width + '" height="' + height + '" src="' + embedUrl + '" title="YouTube video player" frameborder="0" allowfullscreen></iframe>';
// 显示嵌入代码
document.getElementById('embed-code').innerText = embedCode;
});
</script>
</body>
</html>
到此，就完成了一个响应式的YouTube嵌入生成器。 当用户输入视频ID，视频的宽度和高度，以及其他参数后，This tool将生成一个HTML代码片段，可以嵌入到任何网站上并显示与自定义的样式。