1. Log in to your dashboard--> Design- -> Edit HTML
2. Click on "Expand Widget Templates"
3. Search "Ctrl+F" and find ]]></b:skin> , just above it paste the next one:
#easy_popup{ /* popup overlay */
background:#000;
}
#easy_popup_preloader{ /* popup preloader */
padding:10px;
background:#fff;
color:#333;
}
#easy_popup_content{ /* popup window */
padding:10px;
background:#fff;
color:#333;
}
#easy_popup_content .caption{padding-top:10px;}
#easy_popup_close{ /* popup close button */
position:absolute;
background: #000;
border: 1px solid #fff;
float:left;
left:0;
top:-22px;
color:#fff;
padding: 0px 3px 2px 3px;
cursor:pointer;
}
4. Then find </head> and before it paste the next code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src='http://artistutorials.googlecode.com/files/easy.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$.easy.popup();
});
//]]>
</script>
Of you have Jquery already on your template delete the red link
5. Save your template.
6. Now we'll need the direct URL of the video that you want to display on your post. Go to Youtube and on the video you chose click on Share -- Embed and check the Use old embed code.
We dont need all the embed code , just the direct link to the video. So from:
<object width="560" height="349"><param name="movie" value="http://www.youtube.com/v/6ku-n_F7MXk?fs=1&hl=en_US&rel=0
"></param><param name="allowFullScreen"
value="true"></param><param name="allowscriptaccess"
value="always"></param><
embed src="http://www.youtube.com/v/6ku-n_F7MXk?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash"
="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>
... we'll need jut the:
http://www.youtube.com/v/6ku-n_F7MXk?fs=1&hl=en_US
7. Now create a new post. Create a link, text or image and add the video URL to it:
http://www.youtube.com/v/6ku-n_F7MXk?fs=1&hl=en_US
We will need to add a class for the video, the class will be : popup flash so the link will look like:
<a href="http://www.youtube.com/v/6ku-n_F7MXk?fs=1&hl=en_US" class="popup flash"></a>
Then to size the popup window we'll add width and height values:
<a href="http://www.youtube.com/v/6ku-n_F7MXk?fs=1&hl=en_US" class="popup flash" rel="width:560;height:340"></a>
If you forget this step the popup will have default width and height values.
For better understanding on how to add the video on your posts and also to see the trick in action just click the demo link.
DEMO
Post a Comment
Post a Comment