September 14, 2014

Weebly Tricks #74 - Dim Page on Playing Videos

Posted by Domz at 9/14/2014

allofthelights.js for Weebly to dim page while playing videos

Ever heard of allofthelights.js? Well if not, allofthelights.js will create an ambiance to your page while visitors watches your videos.It dims or darken the whole page except for the video so that your visitors can focus on every scene. This is another easy and useful effects specially for video sites.



We need to style 3 HTML here, one for the switch button and for your page. The other one has been integrated on the JavaScript. You don't have to edit them anyway. The procedure is still the same with our previous tutorials. Ok, here we go!


FILES NEEDED
How to use these files? Click Here!


FOOTER CODE
Where to place these codes? Click Here!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://mwtdatabase.weebly.com/files/theme/jquery.allofthelights.js"></script>
<script>
$(document).ready(function() {
    $('.video').allofthelights();
});
</script>

Notes:
Red text - Change with your site address.


HEADER CODE
Where to place these codes? Click Here!

<link rel="stylesheet" href="http://mwtdatabase.weebly.com/files/theme/dipabu.css" type="text/css" />

Notes:
Red text - Change with your site address.


BODY CODE
Where to place these codes? Click Here!

Ok, we will be having two body codes here, one for the switch button and for the video. When I said TWO body codes, you need to drag or insert TWO "embed code" elements on one page. Hope that was clear.

The Switch Button
<div class="switch">Turn off the lights !</div>

The Video
<iframe class="video" width="600" height="338" src="http://www.youtube.com/embed/C-dQgnVRKiw" frameborder="0" allowfullscreen=""></iframe>

Notes from the two body codes:
Yellow text - The text for your switch button.
Blue text - Your YouTube video ID.


CONCLUSION


Let your visitors enjoy your videos by lessening distractions. For more support on this tutorial please visit the forum and post your questions.

This tutorial uses one of the "10 Capsulated Tips that can Change the Way you Edit your Weebly Site". If you don't know them, better read it now.


Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top