在个人博客网站嵌入哔哩哔哩视频HTML5代码 教程
在个人博客、官网等平台嵌入 B 站视频时，官方默认代码常存在画质模糊、弹幕干扰、排版违和等问题，还可能导致用户被引流至 B 站。下面分享一套优化方案，轻松实现自适应页面、默认 1080P 高清播放和关闭弹幕的核心需求。
HTML 在线运行：https://www.toolhelper.cn/Html/Preview
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bilibili 嵌入代码生成器</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
/* 播放器容器样式，用于预览效果 */
.bili-container {
position: relative; width: 100%; height: 0; overflow: hidden;
padding-bottom: 56.25%; /* 16:9 比例 */
border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.bili-container iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}
</style>
<script>
tailwind.config = { theme: { extend: { colors: { 'bili-blue': '#00a1d6', } } } }
let currentEmbedCode = '';
function copyExtractedLink() {
if (currentEmbedCode) {
const tempTextArea = document.createElement('textarea');
tempTextArea.value = currentEmbedCode;
tempTextArea.style.position = 'fixed';
tempTextArea.style.left = '-9999px';
document.body.appendChild(tempTextArea);
tempTextArea.select();
try {
document.execCommand('copy');
showMessage('完整嵌入代码已成功复制到剪贴板！', 'success');
} catch (err) {
showMessage('复制失败，请手动选择并复制上面的完整代码。', 'error');
}
document.body.removeChild(tempTextArea);
} else {
showMessage('没有可复制的完整代码。', 'error');
}
}
function extractAndDisplayVideo() {
const embedCode = document.getElementById('embedCodeInput').value;
const videoContainer = document.getElementById('videoContainer');
const messageBox = document.getElementById('messageBox');
const extractedLinkArea = document.getElementById('extractedLinkArea');
const extractedSrcCode = document.getElementById('extractedSrcCode');
messageBox.textContent = '';
messageBox.classList.add('hidden');
const srcRegex = /<iframe[^>]*\ssrc=["']([^"']+)["'][^>]*>/i;
const match = embedCode.match(srcRegex);
if (match && match[1]) {
let extractedSrc = match[1];
if (extractedSrc.startsWith('//')) {
extractedSrc = 'https:' + extractedSrc;
}
// 构造用于 WordPress 的完整嵌入代码
// 使用外部 div (max-width + margin: 0 auto) 实现居中和响应式
const fullEmbedCode = `<div style="max-width: 800px; margin: 0 auto;">
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<iframe src="${extractedSrc}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: none;"></iframe>
</div>
</div>`.trim();
currentEmbedCode = fullEmbedCode;
extractedSrcCode.textContent = fullEmbedCode;
extractedLinkArea.classList.remove('hidden');
// 播放器预览
const newIframe = document.createElement('iframe');
newIframe.src = extractedSrc;
newIframe.setAttribute('scrolling', 'no');
newIframe.setAttribute('border', '0');
newIframe.setAttribute('frameborder', 'no');
newIframe.setAttribute('framespacing', '0');
newIframe.setAttribute('allowfullscreen', 'true');
videoContainer.innerHTML = '';
const biliContainer = document.createElement('div');
biliContainer.className = 'bili-container mt-6';
biliContainer.appendChild(newIframe);
videoContainer.appendChild(biliContainer);
showMessage('代码生成成功！已优化兼容性，请复制上方的新代码嵌入 WordPress。', 'success');
} else {
showMessage('未找到有效的 iframe src 链接，请检查您粘贴的代码是否完整且正确。', 'error');
videoContainer.innerHTML = '';
extractedSrcCode.textContent = '';
extractedLinkArea.classList.add('hidden');
currentEmbedCode = '';
}
}
function showMessage(message, type) {
const messageBox = document.getElementById('messageBox');
messageBox.textContent = message;
messageBox.classList.remove('hidden', 'bg-red-100', 'text-red-800', 'bg-green-100', 'text-green-800');
if (type === 'success') {
messageBox.classList.add('bg-green-100', 'text-green-800');
} else if (type === 'error') {
messageBox.classList.add('bg-red-100', 'text-red-800');
}
}
function fillExample() {
const exampleCode = `<iframe src="//player.bilibili.com/player.html?aid=388536308&bvid=BV1xd4y1q7c7&cid=846169013&page=1&danmaku=0&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>`;
document.getElementById('embedCodeInput').value = exampleCode;
showMessage('已填充示例代码。', 'success');
}
function clearAll() {
document.getElementById('embedCodeInput').value = '';
document.getElementById('videoContainer').innerHTML = '';
document.getElementById('extractedSrcCode').textContent = '';
document.getElementById('extractedLinkArea').classList.add('hidden');
showMessage('已清空所有内容。', 'success');
currentEmbedCode = '';
}
</script>
</head>
<body class="p-4 md:p-8 min-h-screen">
<div class="max-w-4xl mx-auto bg-white p-6 md:p-10 rounded-xl shadow-2xl">
<header class="mb-8 text-center">
<h1 class="text-3xl font-extrabold text-bili-blue mb-2">Bilibili 嵌入代码生成工具</h1>
<p class="text-gray-600">粘贴 B站代码，生成 WordPress 可用的响应式完整代码。</p>
</header>
<div id="messageBox" class="hidden p-3 rounded-lg text-sm mb-4 transition duration-300"></div>
<div class="mb-6">
<label for="embedCodeInput" class="block text-sm font-medium text-gray-700 mb-2">粘贴 Bilibili 原始嵌入代码:</label>
<textarea id="embedCodeInput" rows="5" class="w-full p-3 border-2 border-gray-300 rounded-lg focus:ring-bili-blue focus:border-bili-blue shadow-inner" placeholder='例如: <iframe src="//player.bilibili.com/..." scrolling="no" ...></iframe>'></textarea>
</div>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mb-8 justify-center">
<button onclick="extractAndDisplayVideo()" class="flex-1 w-full sm:w-auto bg-bili-blue text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-blue-600 transition duration-200 transform hover:scale-[1.01]">
提取并生成完整代码
</button>
<button onclick="fillExample()" class="w-full sm:w-auto bg-gray-200 text-gray-700 font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-gray-300 transition duration-200 transform hover:scale-[1.01]">
填充示例代码
</button>
<button onclick="clearAll()" class="w-full sm:w-auto bg-red-100 text-red-600 font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-red-200 transition duration-200 transform hover:scale-[1.01]">
清空
</button>
</div>
<div id="extractedLinkArea" class="mb-8 p-4 bg-gray-50 border border-gray-200 rounded-xl shadow-inner hidden">
<h3 class="text-lg font-bold text-gray-800 mb-2 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-bili-blue" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5.656 5.656a2 2 0 012.828 0l3 3a2 2 0 11-2.828 2.828l-3-3a2 2 0 010-2.828 1 1 0 00-1.414-1.414 4 4 0 000 5.656l3 3a4 4 0 005.656 0 1 1 0 00-1.414-1.414 2 2 0 01-2.828 0l-3-3a2 2 0 010-2.828z" clip-rule="evenodd" /></svg>
新生成的完整嵌入代码:
</h3>
<code id="extractedSrcCode" class="block w-full text-sm bg-white p-3 rounded-lg overflow-x-auto text-gray-700 select-all border border-gray-300 whitespace-pre-wrap"></code>
<button onclick="copyExtractedLink()" class="mt-3 bg-green-500 text-white text-sm font-semibold py-2 px-4 rounded-lg shadow hover:bg-green-600 transition duration-150 mx-auto block">
复制完整代码
</button>
</div>
<h2 class="text-xl font-bold text-gray-800 border-b pb-2 mb-4 text-center">视频播放效果预览</h2>
<div id="videoContainer" class="min-h-[100px] flex items-center justify-center text-gray-500 bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl">
<p class="p-4 text-center">粘贴代码并点击“提取并生成完整代码”来预览视频。</p>
</div>
</div>
<footer class="mt-8 text-center text-gray-500 text-sm">
<p>© Bilibili 嵌入代码生成工具</p>
</footer>
</body>
</html>适合嵌入 WordPress
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bilibili 嵌入代码生成器</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
/* 播放器容器样式，用于预览效果 */
.bili-container {
position: relative; width: 100%; height: 0; overflow: hidden;
padding-bottom: 56.25%; /* 16:9 比例 */
border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.bili-container iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}
</style>
<script>
tailwind.config = { theme: { extend: { colors: { 'bili-blue': '#00a1d6', } } } }
let currentEmbedCode = '';
function copyExtractedLink() {
if (currentEmbedCode) {
const tempTextArea = document.createElement('textarea');
tempTextArea.value = currentEmbedCode;
tempTextArea.style.position = 'fixed';
tempTextArea.style.left = '-9999px';
document.body.appendChild(tempTextArea);
tempTextArea.select();
try {
document.execCommand('copy');
showMessage('完整嵌入代码已成功复制到剪贴板！', 'success');
} catch (err) {
showMessage('复制失败，请手动选择并复制上面的完整代码。', 'error');
}
document.body.removeChild(tempTextArea);
} else {
showMessage('没有可复制的完整代码。', 'error');
}
}
function extractAndDisplayVideo() {
const embedCode = document.getElementById('embedCodeInput').value;
const videoContainer = document.getElementById('videoContainer');
const messageBox = document.getElementById('messageBox');
const extractedLinkArea = document.getElementById('extractedLinkArea');
const extractedSrcCode = document.getElementById('extractedSrcCode');
messageBox.textContent = '';
messageBox.classList.add('hidden');
const srcRegex = /<iframe[^>]*\ssrc=["']([^"']+)["'][^>]*>/i;
const match = embedCode.match(srcRegex);
if (match && match[1]) {
let extractedSrc = match[1];
if (extractedSrc.startsWith('//')) {
extractedSrc = 'https:' + extractedSrc;
}
// 构造用于 WordPress 的完整嵌入代码 (包含 <center>)
const fullEmbedCode = `<center>
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<iframe src="${extractedSrc}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: none;"></iframe>
</div>
</center>`.trim();
currentEmbedCode = fullEmbedCode;
extractedSrcCode.textContent = fullEmbedCode;
extractedLinkArea.classList.remove('hidden');
// 播放器预览
const newIframe = document.createElement('iframe');
newIframe.src = extractedSrc;
newIframe.setAttribute('scrolling', 'no');
newIframe.setAttribute('border', '0');
newIframe.setAttribute('frameborder', 'no');
newIframe.setAttribute('framespacing', '0');
newIframe.setAttribute('allowfullscreen', 'true');
videoContainer.innerHTML = '';
const biliContainer = document.createElement('div');
biliContainer.className = 'bili-container mt-6';
biliContainer.appendChild(newIframe);
videoContainer.appendChild(biliContainer);
showMessage('代码生成成功！请复制上方的新代码嵌入 WordPress。', 'success');
} else {
showMessage('未找到有效的 iframe src 链接，请检查您粘贴的代码是否完整且正确。', 'error');
videoContainer.innerHTML = '';
extractedSrcCode.textContent = '';
extractedLinkArea.classList.add('hidden');
currentEmbedCode = '';
}
}
function showMessage(message, type) {
const messageBox = document.getElementById('messageBox');
messageBox.textContent = message;
messageBox.classList.remove('hidden', 'bg-red-100', 'text-red-800', 'bg-green-100', 'text-green-800');
if (type === 'success') {
messageBox.classList.add('bg-green-100', 'text-green-800');
} else if (type === 'error') {
messageBox.classList.add('bg-red-100', 'text-red-800');
}
}
function fillExample() {
const exampleCode = `<iframe src="//player.bilibili.com/player.html?aid=388536308&bvid=BV1xd4y1q7c7&cid=846169013&page=1&danmaku=0&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>`;
document.getElementById('embedCodeInput').value = exampleCode;
showMessage('已填充示例代码。', 'success');
}
function clearAll() {
document.getElementById('embedCodeInput').value = '';
document.getElementById('videoContainer').innerHTML = '';
document.getElementById('extractedSrcCode').textContent = '';
document.getElementById('extractedLinkArea').classList.add('hidden');
showMessage('已清空所有内容。', 'success');
currentEmbedCode = '';
}
</script>
</head>
<body class="p-4 md:p-8 min-h-screen">
<div class="max-w-4xl mx-auto bg-white p-6 md:p-10 rounded-xl shadow-2xl">
<header class="mb-8 text-center">
<h1 class="text-3xl font-extrabold text-bili-blue mb-2">Bilibili 嵌入代码生成工具</h1>
<p class="text-gray-600">粘贴 B站代码，生成 WordPress 可用的响应式完整代码。</p>
</header>
<div id="messageBox" class="hidden p-3 rounded-lg text-sm mb-4 transition duration-300"></div>
<div class="mb-6">
<label for="embedCodeInput" class="block text-sm font-medium text-gray-700 mb-2">粘贴 Bilibili 原始嵌入代码:</label>
<textarea id="embedCodeInput" rows="5" class="w-full p-3 border-2 border-gray-300 rounded-lg focus:ring-bili-blue focus:border-bili-blue shadow-inner" placeholder='例如: <iframe src="//player.bilibili.com/..." scrolling="no" ...></iframe>'></textarea>
</div>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mb-8 justify-center">
<button onclick="extractAndDisplayVideo()" class="flex-1 w-full sm:w-auto bg-bili-blue text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-blue-600 transition duration-200 transform hover:scale-[1.01]">
提取并生成完整代码
</button>
<button onclick="fillExample()" class="w-full sm:w-auto bg-gray-200 text-gray-700 font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-gray-300 transition duration-200 transform hover:scale-[1.01]">
填充示例代码
</button>
<button onclick="clearAll()" class="w-full sm:w-auto bg-red-100 text-red-600 font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-red-200 transition duration-200 transform hover:scale-[1.01]">
清空
</button>
</div>
<div id="extractedLinkArea" class="mb-8 p-4 bg-gray-50 border border-gray-200 rounded-xl shadow-inner hidden">
<h3 class="text-lg font-bold text-gray-800 mb-2 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-bili-blue" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5.656 5.656a2 2 0 012.828 0l3 3a2 2 0 11-2.828 2.828l-3-3a2 2 0 010-2.828 1 1 0 00-1.414-1.414 4 4 0 000 5.656l3 3a4 4 0 005.656 0 1 1 0 00-1.414-1.414 2 2 0 01-2.828 0l-3-3a2 2 0 010-2.828z" clip-rule="evenodd" /></svg>
新生成的完整嵌入代码:
</h3>
<code id="extractedSrcCode" class="block w-full text-sm bg-white p-3 rounded-lg overflow-x-auto text-gray-700 select-all border border-gray-300 whitespace-pre-wrap"></code>
<button onclick="copyExtractedLink()" class="mt-3 bg-green-500 text-white text-sm font-semibold py-2 px-4 rounded-lg shadow hover:bg-green-600 transition duration-150 mx-auto block">
复制完整代码
</button>
</div>
<h2 class="text-xl font-bold text-gray-800 border-b pb-2 mb-4 text-center">视频播放效果预览</h2>
<div id="videoContainer" class="min-h-[100px] flex items-center justify-center text-gray-500 bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl">
<p class="p-4 text-center">粘贴代码并点击“提取并生成完整代码”来预览视频。</p>
</div>
</div>
<footer class="mt-8 text-center text-gray-500 text-sm">
<p>© Bilibili 嵌入代码生成工具</p>
</footer>
</body>
</html>
