Kali ini saya mau berbagi cara membuat Cinema Mode di Wordpress untuk Website Streaming
Oke langsung aja :D
Ini untuk kode Javascriptnya
Taruh di header.php diatas body
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Cinema Off").removeClass("turnedOff");
else
$(this).html("Cinema Mode").addClass("turnedOff");
});
});
//]]>
</script>Dan ini untuk kode CSS nya
.lightsarea {overflow: hidden;margin-bottom: 3px;}
#lightsVideo {position:relative;z-index:102;}
#switch {}
#switch a:hover{text-decoration:underline;}
.lightSwitcher {cursor: pointer;z-index: 101;font-size: 12px;text-transform: uppercase;color: #333;font-weight: 600;}
.lightSwitcher:hover { text-decoration:underline;}
.turnedOff {color:#fff}
#switch a{color:#333;}
#lightsoff {background:rgba(0, 0, 0, 0.93);opacity:0.99;filter:alpha(opacity=90);position:absolute;left:0;top:0;width:100%;z-index:100;}Dan ini silakan taruh di atas div player embed kalian
<div id="lightsVideo">Dan yang ini kode terakhir taruh di dekat video player
<div id='switch'>
<span class='lightSwitcher' id='checkbox'>
<a href='javascript:void(0);' type='checkbox'>Cinema Off</a>
<label data-off='OFF' data-on='ON'></label>
</span>
</div>Silahkan coba
Jika ada error silahkan Comment :)
EmoticonEmoticon