fitur fullscreen youtube

Please wait 0 seconds...

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

KLIK DEMO genre: kungfu

KLIK DEMO genre: action

cara memasang

buka EDIT HTML template

cari kode </body>

letakkan kode video responsive ini di bawah ini di atasnya

<script>
$(document).ready(function() {
$(&quot;.play-1, .play-2&quot;).ytResponsive();
});
</script>
<script src='https://rawgit.com/mastamvan/backup/master/ytResponsive.js' type='text/javascript'/>

pasang jquery:

bagi yg belum ada kode jquery silahkan pasang jquery ini di atas </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

css

lalu pastekan lagi css dibawah ini di atas </head>

<style type="text/css">
.ytResponsive{z-index:9999;top:0;border:5px solid white;box-sizing:border-box;border-radius:2px}
.ytResponsive-iframe{display:block;height:100%;width:100%;border:0}
.ytResponsive-overlay{z-index:9998;background:#000;opacity:0.8}
.ytResponsive-close{position:absolute;top:0;right:0;border:0;cursor:pointer;background:white;font-weight:bold;padding:7px 8px}
.ytResponsive-close.warp::before,.ytResponsive-close.warp::after{border-radius:120% 0}
.ytResponsive-close.thick::before,.ytResponsive-close.thick::after{height:3px;margin-top:-2px}
.ytResponsive-close:before,.ytResponsive-close:after{content:'';position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#000}
.ytResponsive-close:before{-webkit-transform:rotate(47deg);-moz-transform:rotate(47deg);-ms-transform:rotate(47deg);-o-transform:rotate(47deg);transform:rotate(47deg)}
.ytResponsive-close:after{-webkit-transform:rotate(-43deg);-moz-transform:rotate(-43deg);-ms-transform:rotate(-43deg);-o-transform:rotate(-35deg);transform:rotate(-43deg)}
a.playvid,button.playvid{padding:7px 8px;background:red;color:white!important;text-decoration:none;font-size:16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);text-transform:uppercase;margin:2%;border-radius:3px;font-family:'Open Sans',sans-serif}
button.playvid{cursor:pointer;border:none}
</style>

sev template .

cari video yg di inginkan

jika telah ketemu videonya klik BAGIKAN .


https://youtu.be/QdyvzUGE5B8?si=YlWsDzyHcLhtu6ew
QdyvzUGE5B8?si=YlWsDzyHcLhtu6ew ambil di bagian ini .

buka ruang posting atau halaman .
pastekan susunan ini ke dalam nya .

<a class="playvid play-1" href="https://youtu.be/JoJbQHCvyw0">Play my video</a>
Atau
<a class="playvid play-2" href="https://youtu.be/JoJbQHCvyw0">Play my video</a>

yg saya tandai di atas , ganti dengan milik youtube yg tadi di salin .
boleh memakai 1 saja atau 1000 kode di ruang posting . terserah .

tulisan Play my video dapat di ganti dengan gambar tampilan video di youtube yg telah disalin kodenya .
<img src='alamat gambar thumbnail'/>

posting dan lihat hasilnya .

untuk lebih jelasnya , di ruang posting kodenya seperti ini jika memakai gambar thumbnail ;

<a class="playvid play-1" href="https://youtu.be/SK0GG4SoMN8?si=R02xswMVPM_iVS1U">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirsW5YOoinTh0KxmhifwwZ2yQybvCPhmvU3WDl5EVu9u-T-RpAZuoItcmTlPg-cqGl6nSzcMRoP7wvIVb-X0o7engWlPfYAoyQwC-lHtq25vB0YOGWrgHmZzQgy4cO5edpgaWr95CRvR0tnSciMCKjatELJTnTlqlJYbVzX5Jx5XngSJpeYiu1RW21wueH/s600/kungfu.jpg"/ width='100%' height='auto'/>
</a> 

sumber : https://mastamvan.blogspot.com/2017/02/full-screen-popup-youtube-responsive.html
lalu saya edit sedikit .

jika ingin tampilan seperti di atas , gunakan css ini :

 <style type='text/css'>
.ytResponsive{z-index:9999;top:0;border:1px solid white;box-sizing:border-box;border-radius:2px}
.ytResponsive-iframe{display:block;height:100%;width:100%;border:0}
.ytResponsive-overlay{z-index:9998;background:#000;opacity:0.8}
.ytResponsive-close{position:absolute;top:0;right:0;border:0;cursor:pointer;background:white;font-weight:bold;padding:7px 8px}
.ytResponsive-close.warp::before,.ytResponsive-close.warp::after{border-radius:120% 0}
.ytResponsive-close.thick::before,.ytResponsive-close.thick::after{height:3px;margin-top:-2px}
.ytResponsive-close:before,.ytResponsive-close:after{content:&#39;&#39;;position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#000}
.ytResponsive-close:before{-webkit-transform:rotate(47deg);-moz-transform:rotate(47deg);-ms-transform:rotate(47deg);-o-transform:rotate(47deg);transform:rotate(47deg)}
.ytResponsive-close:after{-webkit-transform:rotate(-43deg);-moz-transform:rotate(-43deg);-ms-transform:rotate(-43deg);-o-transform:rotate(-35deg);transform:rotate(-43deg)}
a.playvid,button.playvid{padding:7px 8px;background:trasparent;color:white!important;text-decoration:none;font-size:16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);text-transform:uppercase;margin:2%;border-radius:3px;font-family:&#39;Open Sans&#39;,sans-serif}
button.playvid{cursor:pointer;border:none}
</style>

BERAPA NILAI ARTIKEL INI

Go to Link