首页>文档>源码技巧>Wordpress>子比>子比主题美化侧边栏添加视频小卡片

需要支持?

如果通过文档没办法解决您的问题,请提交工单获取我们的支持!

子比主题美化侧边栏添加视频小卡片

WordPress网站子比主题美化侧边栏添加视频小卡片。分享一个在侧边栏添加一个视频小卡片,可以根据网站的需求自行更换成喜欢的视频进行播放,用户可点击下一个进行视频更换,增加网站互动率,增加用户的粘性,喜欢的自行下载测试文章也汇总了部分视频API接口,可能会有失效,请自行斟酌使用。

子比主题美化侧边栏添加视频小卡片插图
WordPress网站子比主题美化侧边栏添加视频小卡片

使用教程

后台>>外观>>小工具>>自定义HTML>>放置侧边栏

//文章页面高亮代码复制粘贴-https://www.dzcrv.com
<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://www.yujn.cn/api/yuzu.php">
                <source src="http://www.yujn.cn/api/yuzu.php" 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://www.yujn.cn/api/yuzu.php";

        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>

扩展教程

这里顺便分享一波视频API接口,大家可以根据自己的需要替换代码中的接口链接

  • 小姐姐视频:https://sp.4n2.cn/?api=xjj
  • 小哥哥视频:https://sp.4n2.cn/?api=xgg
  • 甜妹视频:https://sp.4n2.cn/?api=tm
  • 二次元视频:https://sp.4n2.cn/?api=ecy
  • jk和萝莉视频:https://sp.4n2.cn/?api=jkllt
  • 丝袜视频:https://sp.4n2.cn/?api=sw
  • 慢摇视频:https://sp.4n2.cn/?api=my
  • 变装视频:https://sp.4n2.cn/?api=bianzhuang
  • 小姐姐视频:http://www.yujn.cn/api/zzxjj.php
  • 小哥哥视频:http://www.yujn.cn/api/xgg.php
  • 玉足美腿:http://www.yujn.cn/api/yuzu.php
  • 甜妹系列:http://www.yujn.cn/api/tianmei.php
  • jk洛丽塔: http://www.yujn.cn/api/jksp.php
  • 你的欲梦: http://www.yujn.cn/api/ndym.php
  • 双倍快乐: http://www.yujn.cn/api/sbkl.php
  • 热舞系列:http://www.yujn.cn/api/rewu.php
  • 萝莉系列:http://www.yujn.cn/api/luoli.php
  • 漫画芋:http://www.yujn.cn/api/manhuay.php
  • 小新翻唱:http://www.yujn.cn/api/xiaoxin.php
  • 蛇姐系列:http://www.yujn.cn/api/shejie.php
  • 汉服系列:http://www.yujn.cn/api/hanfu.php
  • 狱卒系列:http://www.yujn.cn/api/jpmt.php
  • 慢摇系列:http://www.yujn.cn/api/manyao.php
  • 掉带系列:http://www.yujn.cn/api/diaodai.php
  • 清纯系列:http://www.yujn.cn/api/qingchun.php
  • COS系列:http://www.yujn.cn/api/COS.php
  • 纯情女高:http://www.yujn.cn/api/nvgao.php
  • 街拍系列:http://www.yujn.cn/api/jiepai.php
  • 快手变装:http://www.yujn.cn/api/ksbianzhuang.php
  • 懒洋洋翻唱:http://www.yujn.cn/api/lyy.php
  • 完美身材:http://www.yujn.cn/api/wmsc.php
  • 丝滑舞蹈:http://www.yujn.cn/api/shwd.php
  • 穿搭系列:http://www.yujn.cn/api/chuanda.php
  • 鞠婧祎系列:http://www.yujn.cn/api/jjy.php
  • 章若楠系列:http://www.yujn.cn/api/zrn.php

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索