اضافة اطفئ الانوار فوق الفيديو 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>

لا تبخل علينا بتعليق بسيط ،، يشجعنا ،، و يمنحك فرصة لاستفادة اكبر :)

لاتتردد بوضع اي استفسار حول الموضوع ضعه في تعليق ويتم الرد عليه في اقرب وقت انشاء الله

دمتم برعاية الله وحفظه