اضافة اطفئ الانوار فوق الفيديو Turn off lights

اضافة اطفئ الانوار فوق الفيديو Turn off lights


اضافة اطفئ الانوار فوق الفيديو Turn off lights
اضافة اطفئ الانوار فوق الفيديو Turn off lights

بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته.

اضافة اطفئ الانوار فوق الفيديو Turn off lights

دائماَ ما نرى هذه الاضافة في مواقع الفيديو ومواقع بالخصوص التي تجذب الزوار الى مقاطع الفيديو حيث نشاهد فوق الفيديو " اطفئ الانوار Turn off lights" او " اطفئ الضوء Turn off lights" وهذه الاضافة وضيفتها انه عند الضغط عليها , سيتم جعل خلفية الفيديو وكامل الموقع بلون الداكن بحيث يتم مشاهدة الفيديو بطريقة مريحة اكثر .



مثال مباشر : هنا.


طريقة التركيب : 

  • ادخل مدونتك.
  • ابحث عن </head>
  • الصق هذا الكود فوقه او قبله : 
<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("أطفئ الانوار").removeClass("turnedOff");
else
$(this).html("شغل الانوار").addClass("turnedOff");
});
});
//]]>
</script>


  • الان ابحث عن </body>
  • والصق هذا الكود فوقه او قبله : 
<div id='lightsoff'/>


  • الان عند كتابتك للتدوينة الصق هذا الكود في محرر html 
<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
.... هنا كود الفيديو....
</div>
</center>



  • مثال على كود الفيديو من اليوتيب : 
<iframe width="640" height="315" src="//www.youtube-nocookie.com/embed/BS2wy8h9cbk" frameborder="0" allowfullscreen="">
</iframe>



اتمنى ذكر المصدر عند النقل.

تعليقات

الأرشيف

نموذج الاتصال

إرسال