🎬 问题：视频无法打开
- YouTube链接失效 - 视频可能被删除或设为私有
- 嵌入代码错误 - iframe代码不正确
- 本地视频缺失 - 视频文件未上传到服务器
- 浏览器兼容性 - 视频格式不被支持
✅ 视频修复方案
- 检查所有YouTube链接 - 确保视频仍然可用
- 更新嵌入代码 - 使用最新的YouTube嵌入格式
- 添加备用视频源 - 提供多个视频格式
- 添加错误处理 - 视频加载失败时显示备用内容
<!-- 修复后的视频嵌入代码 -->
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<div class="video-fallback" style="display: none;">
<p>视频暂时无法播放，请<a href="https://youtu.be/VIDEO_ID">点击这里观看</a></p>
</div>
</div>
<script>
// 检测视频是否加载成功
document.addEventListener('DOMContentLoaded', function() {
const iframes = document.querySelectorAll('iframe[src*="youtube"]');
iframes.forEach(iframe => {
iframe.onerror = function() {
this.style.display = 'none';
this.nextElementSibling.style.display = 'block';
};
});
});
</script>
📝 CSS修复代码
添加以下CSS让按钮可点击并美化：
/* 让音乐分类按钮可点击 */
.hymn-category {
padding: 15px;
background: white;
border-radius: 8px;
border: 2px solid #e2e8f0;
text-align: center;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
color: inherit;
display: block;
}
.hymn-category:hover {
border-color: #D4AF37;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* 修复网格布局 */
.hymns-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin: 20px 0;
}
/* 视频容器修复 */
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 比例 */
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}