Blogger'da Video Oynatıcı Nasıl Eklenir?

Merhaba Arkadaşlar bugün sizlere Blogger sitenize Video oynatıcı nasıl eklenir onu anlatmaya çalışacağım.

Öncelikle aşağıda ki CSS kodlarını temamızda ]]></b:skin> kodunu bulalım ve stil kodlarını üzerine gelecek şekilde yükleyelim.

      /* 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)}

Daha sonra aşağıda ki JavaScript kodunu </body> kodunun üzerine gelecek şekilde ekleyelim.

      <!--[ 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>

Son olarak temanızda cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1 kodu yok ise aşağıda ki kodu </head> kodunuzun yine üzerine gelecek şekilde ekleyin.

      <!--[ jQuery v3.5.1]--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Ve son olarak Videomuzun görünmesini istediğimiz yere aşağıda ki HTML kodunu ekleyelim.

      <!--[ 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>

Demo sayfasını aşağıda ki linkten kontrol edebilirsiniz.