网站侧边栏添加随机短视频小卡片教程

今天，我将为大家分享一个实用的教程，教你如何在网站的侧边栏添加一个视频小卡片。这个小卡片不仅可以根据网站需求自行更换视频，还允许用户通过点击“下一个”按钮来切换视频，从而互动率和用户粘性。如果你对这个功能感兴趣，不妨继续阅读并自行下载测试。

使用教程

要在你的网站侧边栏添加这个视频小卡片，请按照以下步骤操作：

进入后台管理：
- 登录到你的网站后台管理系统。
添加自定义HTML小工具：
- 导航到“外观”>“小工具”。
- 在侧边栏区域添加一个“自定义HTML”小工具。
粘贴HTML代码：
- 在自定义HTML小工具中粘贴以下代码：

<div class="video-container">
    <video id="videoPlayer" autoplay muted playsinline src="视频接口">
        <source src="视频接口" type="video/mp4">
        您的浏览器不支持 HTML5 视频标签。
    </video>
    <div class="volume-control">
        <input id="volumeSlider" class="volume-slider" type="range" min="0" max="1" step="0.01" value="0.5">
    </div>
    <button class="next-button" id="nextButton">下一个</button>
</div>

注意：请将视频接口替换为你想要播放的视频的实际链接。

添加CSS和JS样式：

接着，在适当的位置（如网站的CSS文件或<head>标签内）添加以下CSS样式和JavaScript代码，以确保视频小卡片能够正常显示和交互。

<style>
.video-container {
width: 100%;
height: auto;
border-radius: 20px;
overflow: hidden;
position: relative;
background-color: #000;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
font-family: Arial, sans-serif;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.video-container .next-button {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.85);
border: none;
color: #000;
font-size: 12px;
font-weight: bold;
padding: 6px 12px;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
transition: transform 0.3s, background 0.3s, opacity 0.3s;
opacity: 0.5;
}
.video-container .next-button:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 1);
opacity: 1;
}
.video-container .volume-control {
position: absolute;
bottom: 30px;
left: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
opacity: 0.5;
transition: opacity 0.3s;
}
.video-container .volume-control:hover {
opacity: 1;
}
</style>