This stupid idea come into my head when I analyze the most keywords coming to one of my lyrics site. Mostly people coming to my site with a relevant keyword, example: song title and artist name. I need something to make an interactive place for them to keep them coming back. I was thinking about an video preview and it ended with related video idea.

On this short articles I will share the way to created youtube related video using combination of PHP and javascript (using wordpress as CMS, of course you can edit it to fit your site). This feature will fits for mp3 sites or reviews related site which may need related video to give more information to visitors.

First we will need this javascript code:

function ytlist(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = [‘<ul class=”yt-related”>’];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
var playerUrl = entries[i].media$group.media$content[0].url;
html.push(‘<li onclick=”loadVideo(\”, playerUrl, ‘\’, true)”>’, ‘<img src=”‘, thumbnailUrl, ‘” width=”130″ height=”90″/>’, ‘</span></li>’);
}
html.push(‘</ul><br style=”clear: left;”/>’);
document.getElementById(‘ytlist’).innerHTML = html.join(”);
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url, false);
}
}
function loadVideo(playerUrl, autoplay) {
var atts = {
id: ‘ytbox’
};
swfobject.embedSWF(playerUrl + ‘&fs=1&enablejsapi=1&autoplay=’ + (autoplay ? 1 : 0), ‘player’, ‘500’, ‘300’, ‘9.0.0’, false, false, {
allowfullscreen: ‘true’
}, {
allowscriptaccess: ‘always’
});
}
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;

[to_plus]

Save it as yt.js or get it directly from here yt.js upload it into the right place (in this sample I used wordpress so I put it into themes folder). Next in your header site put this code before </head> tag

<script type=”text/javascript” src=”http://YOURDOMAIN/PATH/yt.js”></script>
<script type=”text/javascript” src=”http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js”></script>

After this done create CSS file or add this code bellow if you’re already have the CSS file.

#yt{background:#FFF;width:575px}
.close{background:#eee;font-size:12px;height:20px;text-align:right;width:500px}
.close a{color:#111}
ul.yt-related li{cursor:pointer;float:left;list-style:none;margin:5px;width:130px}
ul.yt-related{margin-bottom:10px;margin-top:10px}
#ytbox{display:none;float:left;height:300px;margin:20px;width:500px}
#player{margin-bottom:20px}
#ytlist{margin-top:10px}

Last step is just put this code in area where you want related video shown. Because in this sample I used wordpress I put this code on single.php and using <?php the_title(); ?> as the keyword for related video (you can change this to anything you like).

<div id=”yt”> <h4>Video Terkait Tentang <?php the_title(); ?></h4>
<div id=”ytbox”>
<div class=”close”
onclick=”setVisibility(‘ytbox’, ‘none’);”>
<center><a href=”javascript:void(0)”>Selesai Menonton</a></center>
</div>
<object id=”player”></object>
</div>
<div id=”ytlist” onclick=”setVisibility(‘ytbox’, ‘block’);”>
</div>
<center><script type=”text/javascript”
src=”http://gdata.youtube.com/feeds/api/videos?q=<?php the_title(); ?>&alt=json-in-script&callback=ytlist&max-results=4&format=5″>
</script></center>
</div>
<div id=”yt”> <h4>Video Terkait Tentang <?php the_title(); ?></h4>
<div id=”ytbox”>
<div class=”close”
onclick=”setVisibility(‘ytbox’, ‘none’);”>
<center><a href=”javascript:void(0)”>Selesai Menonton</a></center>
</div>
<object id=”player”></object>
</div>
<div id=”ytlist” onclick=”setVisibility(‘ytbox’, ‘block’);”>
</div>
<center><script type=”text/javascript”
src=”http://gdata.youtube.com/feeds/api/videos?q=<?php the_title(); ?>&alt=json-in-script&callback=ytlist&max-results=4&format=5“>
</script></center>
</div>

The result will be like this sample:

You can check the live sample in here http://lyrics.mp3zap.net/judas.html Try opening another post and check the related video it will automatically searching related video on youtube using post title as keyword.

Have problem to integrate? don’t be shy to asking as long I’m not busy I will help. That’s share for today, Have a nice day 🙂

[/to_plus]

Similar Posts:

Related Search Terms:

    Digg Del.icio.us StumbleUpon Reddit Twitter RSS

If you're new here, you may want to subscribe to my RSS feed. You may copy or publish this article to your blog or other site as long you give credit link back to this site article. Thanks for visiting my blog!