How to add Neumorphism Video player with episodes for Blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to add Neumorphism Video player with episodes for Blogger

Benefits :-

  1. Neumorphism Button Design.
  2. Change those old look buttons with new one that looks awesome.
Let's Start
Neumorphism Video player with episodes Demo

How to add Neumorphism Video player with episodes for Blogger :-

Step 1 :- Go to Blogger's dashboard and click theme.
Step 2 :- Click the arrow down icon next to the 'customize' button.
Step 3 :- Click Edit Html.
Step 4 :- Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.
Step 5 :- Copy the provided below code and paste it just before ]]></b:skin>.

/* Video Player */ .vidBdy{width:100%;border-radius:10px;margin-bottom:26px;background:#ebf5fc;box-shadow: -6px -6px 20px rgba(255,255,255,1), 6px 6px 20px rgba(178,178,178,.60);border-radius:15px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-mos-box-sizing:border-box;margin-bottom: 1.66rem;} .name{padding:0 0 0 66px;background-color:#6001d3;border-radius:8px;position:relative;display:flex;justify-content:space-between} .ttl-name{width:100%} .name h2{color:#fff!important;font-size:16px;margin-left:-40px!important;padding:0} .vidBd{padding:10px} .vidBd h1{font-size:30px;margin:2px;line-height:1em} .vidBdCate,.vidBdCate a{font-size:12px;color:#ffc119;padding-top:5px;position:relative} .vidBdCate span{color:#2a2a2a} .vidBdCate,.vidBdCate a{font-size:12px;color:#ffc119;padding-top:5px;position:relative} .vidInf{padding-top:5px;padding-bottom:2px} .vidNteWtch{position:relative;text-align:center} .dwnldVid{padding-top:15px;position:relative} .vidNteWtch{position:relative;text-align:center} .vidBd_report{position:absolute;right:0;bottom:0} .vidBd_watch{margin:20px 0} .vidBodyWtchCnt{position:relative} .vidBodyWtchCnt{margin:10px 0} .plyVid{position:relative;padding-bottom:58%;height:0;width:100%} .plyVid iframe{position:absolute;top:0;width:100%;height:100%}

/* Episodes Card */ #epsds{background:#ebf5fc;box-shadow:-6px -6px 20px #fff,6px 6px 20px rgba(0,0,0,.1);border-radius:15px} .epSec{border-radius:10px;padding:15px;margin-bottom:1.66rem;box-shadow:0 10px 50px 0 rgba(178,178,178,.6)} .epSec .head{position:relative;margin-bottom:10px} #epsds ul.ranges{font-size:.85em;list-style:none;margin:0;padding:0;display:inline-block} #epsds ul.ranges li{display:inline-block;color:#666;cursor:pointer;padding:2px 5px;border-radius:3px;-webkit-transition:all .15s;-moz-transition:all .15s;transition:all .15s} #epsds ul.ranges li.active{color:#6001d3} #epsds ul.epsds{margin:0;padding:0;list-style:none;margin:0 -5px;margin-top:10px} #epsds ul.epsds li{float:left;width:10%} #epsds ul.epsds li a{color:inherit} #epsds ul.epsds li a{cursor:pointer;padding:5px 10px;min-width:51px;text-align:center;display:block;margin:0 5px 10px;border:1px solid #eceff1;border-radius:8px;font-size:.96em;color:inherit} #epsds ul.epsds li a:hover{cursor:pointer;background:#6001d3;color:#f8f8f8} #epsds ul.epsds li a.active{background:#6001d3;color:#f8f8f8} .epSec .body:after{display:block;clear:both;content:""} .tabsHead{display:flex;border-bottom:1px solid #1e1e1e;margin-bottom:30px;font-size:13px;line-height:1.7em} .tabsHead > :not(:last-child){margin-right:7px} .tabsHead > * {padding:8px 12px;border:1px solid #1e1e1e;border-bottom:0;border-radius:4px 4px 0 0;position:relative} .tabsHead > :before{content:attr(data-text)} .tabsHead > :after{content:'';display:block;width:100%;height:2px;background-color:#6001d3;position:absolute;left:0;bottom:-1px;visibility:hidden;opacity:0} .tabsContent{position:relative} .tabsContent > * {display:none;width:100%} .tabsContent > * p:first-child{margin-top:0}input[id*="1"]:checked ~ .postTabs label[for*="1"]:after, input[id*="2"]:checked ~ .postTabs label[for*="2"]:after, input[id*="3"]:checked ~ .postTabs label[for*="3"]:after, input[id*="4"]:checked ~ .postTabs label[for*="4"]:after, input[id*="5"]:checked ~ .postTabs label[for*="5"]:after, input[id*="6"]:checked ~ .postTabs label[for*="6"]:after, input[id*="7"]:checked ~ .postTabs label[for*="7"]:after, input[id*="8"]:checked ~ .postTabs label[for*="8"]:after{visibility:visible;opacity:1}input[id*="1"]:checked ~ .postTabs .tabsContent div[class*=Content-1], input[id*="2"]:checked ~ .postTabs .tabsContent div[class*=Content-2], input[id*="3"]:checked ~ .postTabs .tabsContent div[class*=Content-3], input[id*="4"]:checked ~ .postTabs .tabsContent div[class*=Content-4], input[id*="5"]:checked ~ .postTabs .tabsContent div[class*=Content-5], input[id*="6"]:checked ~ .postTabs .tabsContent div[class*=Content-6], input[id*="7"]:checked ~ .postTabs .tabsContent div[class*=Content-7], input[id*="8"]:checked ~ .postTabs .tabsContent div[class*=Content-8]{display:block}

/* Responsive */
@media screen and (max-width:640px){#epsds ul.epsds li{float:left;width:20%}}
@media screen and (max-width:640px){.tabsHead{font-size:12px}}

/* Dark Mode */ .drK #epsds{background:#252526;box-shadow: -6px -6px 20px rgba(21, 21, 24, 1), 6px 6px 20px rgba(36, 37, 41, 1)} .drK #epsds ul.epsds li a, .drK .tabsHead > *{border-color:#989b9f} .drK .vidBd{background:#252526;box-shadow: -6px -6px 20px rgba(21, 21, 24, 1), 6px 6px 20px rgba(36, 37, 41, 1)}
Step 5 :- Replace all the blue background marked parts according to your theme.

Step 6 :- Add this Html code to use the button in your posts or pages

 <!--[ Video Player]---><div class="vidBdy"> <div class="name video"> <div class="ttl-name"> <h2>#</h2> </div> </div> <div class="vidBd"> <h1 id="vidTtl">Title Name</h1> <div class="vidBd_watch"> <div id="loadVid"> <div class="vidBodyWtchCnt load"> <div class="plyVid"> <iframe allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true" id="player" loading="lazy" src="#" style="border: none; height: 100%; position: absolute; top: 0; width: 100%;"></iframe> </div> </div> </div> </div> </div></div><div id="epsds"> <div class="epSec"> <div class="head"> <!--[ Active function]--> <input class='allTabs hidden' id='forall-tabs1' type='radio' name='postTabs' checked> <input class='allTabs hidden' id='forall-tabs2' type='radio' name='postTabs'> <div class='postTabs'> <div class='tabsHead'> <!--[ Change atribute data-text='...' to replace tabs title]--> <label for='forall-tabs1' data-text='S01'></label> <label for='forall-tabs2' data-text='S02'></label> </div> <div class='tabsContent'> <!--[ Tabs content]--> <div class='tabsContent-1'> <div class="body"> <ul class="epsds"> <li><a data-link="#" data-title="01 - Title Name" onclick="titleFunction(this)" title="">01</a></li> <li><a data-link="#" data-title="02 - Title Name" onclick="titleFunction(this)" title="">02</a></li> <li><a data-link="#" data-title="03 - Title Name" onclick="titleFunction(this)" title="">03</a></li> </ul> </div> </div> <!--[ Tabs content]--> <div class='tabsContent-2'> <div class="body"> <ul class="epsds"> <li><a data-link="#" data-title="01 - Title Name" onclick="titleFunction(this)" title="">01</a></li> <li><a data-link="#" data-title="02 - Title Name" onclick="titleFunction(this)" title="">02</a></li> <li><a data-link="#" data-title="03 - Title Name" onclick="titleFunction(this)" title="">03</a></li> </ul> </div> </div> </div> </div> </div> </div></div>

Don't forget to replace # with your button url and click save.

Step 7 :- Copy the provided below code and paste it just before </body>.
<!--[ Video PLayer with episodes]--><script>/*<![CDATA[*//* Video PLayer with episodes script */ function titleFunction(t){document.getElementById("vidTtl").innerText=t.getAttribute("data-title")}$(document).ready(function(){$("ul.epsds li a").click(function(t){t.preventDefault(),$("#player").attr("src",$(this).attr("data-link"))})}),$("ul.epsds li a").click(function(t){t.preventDefault(),$("a").removeClass("active"),$(this).addClass("active")}); /*]]>*/</script>

Note !

Don't put the JavaScript in your posts because it will not work put it only above </body>
Step 8 :- Copy the provided below code and paste it just before </head>.
 <!--[ jQuery v3.5.1]--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Conclusion

In this post, I have talked about How to add Neumorphism Video player with episodes for Blogger. Tell us What You Say About The Post by Making a Comment and if you have any questions Contact Us at the Contact Us page. Hope You Enjoy In Our Website.

Refrence:
https://www.wolvthemes.xyz/2022/01/how-to-add-neumorphism-video-player.html

Our Posts Are Protected By DMCA.com. Don't Copy Our Post. Wolv Themes All Rights Reversed.

Rate this article

Frontend Developer and UX Designer

13 comments

  1. Not working
    1. It works very well
  2. Make a tutorial on it
    1. Sure buddy
      I will make a yt video tutorial now
  3. Step 7 before ?
    1. Sorry for that error
      Step 7: before <body>

      Step 8: before </head>
    2. *step 7: before </body>
  4. < / head > ?
    1. Sorry, I'm confused. Can u show us how to add size video on post?
  5. Can you make one for comics or novels?
    1. you mean that you want a pdf reader instead of the video player ?
  6. www.youtube.com refused to connect.
  7. Very Nice Information, Special Thanks for You !
    US News Lead