Display a flash Youtube video in a popup window in your posts
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
11 comments
thanks a lot working now but may drop menu in may blog not function. what alternative way to function it.
Make sure you don't have multiple Jquery scripts installed.
How can i use vimeo instead of youtube. I tried it but when it pops up it is just white. thanks!
My youtube video is playing in full screen (the size of the browser)
Follow the tutorial exactly and it will work.
Thank q very much.....it's working 4 me
thank you so much this helped me out alot
This was very helpful, thanks. Do you know how this would work out with Vimeo?
hey!!! nice post yaar
i wud like to know how can we make adsense over the post video,
like close ad for play video
I'm getting a scrollbar next to the video and can't figure out how to fix it, any suggestions?
URL: http://stepupdates.blogspot.com/
Just reduce the height of your youtube video until the scrollbar is gone.
Click to Add a New Comment
Leave your comment
- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.