WordPress网站美化：给网站侧栏添加一个视频卡片

前言

halo，今天在社区里看到了一个侧边栏视频小卡片，感觉挺好看的，我将代码简单整理优化了一下，这里拿出来分享一下，喜欢的自取！

演示效果

<style>
    .video-container {
        width: 100%;
        height: 100%;
        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;
    }

    .video-container .volume-slider {
        width: 80px;
        height: 5px;
        background: #ccc;
        border-radius: 5px;
        outline: none;
        appearance: none;
        cursor: pointer;
    }

    .video-container .volume-slider::-webkit-slider-thumb {
        appearance: none;
        width: 12px;
        height: 12px;
        background: #fff;
        border-radius: 50%;
        cursor: pointer;
    }

    .video-container .volume-slider {
        border: none;
    }
</style>
<div class="video-container">
    <video id="videoPlayer" autoplay="" muted="" playsinline="" src="http://api.mmp.cc/api/ksvideo?type=mp4&id=QingCun">
        <source src="http://api.mmp.cc/api/ksvideo?type=mp4&id=QingCun" 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">
    </div>
    <button class="next-button" id="nextButton">下一个</button>
</div>

<script>
    const videoPlayer = document.getElementById('videoPlayer');
    const nextButton = document.getElementById('nextButton');
    const volumeSlider = document.getElementById('volumeSlider');
    const videoUrl = "http://api.mmp.cc/api/ksvideo?type=mp4&id=QingCun";

    function loadVideo() {
        videoPlayer.src = videoUrl;
        videoPlayer.play();
    }

    videoPlayer.addEventListener('ended', loadVideo);
    nextButton.addEventListener('click', loadVideo);
    videoPlayer.addEventListener('click', () => {
        videoPlayer.paused ? videoPlayer.play() : videoPlayer.pause();
    });
    videoPlayer.addEventListener('contextmenu', (e) => e.preventDefault());
    volumeSlider.addEventListener('input', () => {
        videoPlayer.volume = volumeSlider.value;
        videoPlayer.muted = videoPlayer.volume === 0;
    });

    loadVideo();
</script>