Let’s start with a little demonstration. The section below is made by calling the php-script https://pappmaskin.no/opensource/youtube/youtube.php?s=super&max=9 within an iframe:
Why iframe?
Just to make it easier to reuse and embed Youtube videos on different sites, and because it makes it easier to try out new ideas without adding messy bits to a larger project. Sort of like rapid prototyping/proof of concept before «committing» to a feature and spending alot of time integrating something you might end up throwing out.
This solution currently consists of these files:
youtube.php, takes s=whateveryouwanttofind and max=number of videos to return as GET parameters
youtube5.xsl, does all the transformation of the xml from youtube into lovely xhtml.
youtube.js, javascript file that handles clicking on the thumbnails to load a new video, using innerHtml
youtube.css, minimalist styling to keep things pretty.
swfobject.js, for embedding flash
The xslt:
<?xml version=»1.0″ encoding=»UTF-8″?> <xsl:stylesheet version=»1.0″ xmlns:xsl=»http://www.w3.org/1999/XSL/Transform» xmlns:fn=»http://www.w3.org/2005/xpath-functions» xmlns:gd=»http://schemas.google.com/g/2005″ xmlns:media=»http://search.yahoo.com/mrss/» xmlns:n1=»http://www.w3.org/2005/Atom» xmlns:openSearch=»http://a9.com/-/spec/opensearchrss/1.0/» xmlns:xdt=»http://www.w3.org/2005/xpath-datatypes» xmlns:xs=»http://www.w3.org/2001/XMLSchema» xmlns:xsi=»http://www.w3.org/2001/XMLSchema-instance» xmlns:yt=»http://gdata.youtube.com/schemas/2007″ xmlns:altova=»http://www.altova.com»> <xsl:output method=»html» encoding=»ISO-8859-1″ doctype-public=»-//W3C//DTD XHTML 1.0 Transitional//EN» doctype-system=»http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»/> <xsl:param name=»SV_OutputFormat» select=»‘HTML'»/> <xsl:variable name=»XML» select=»/»/> <xsl:template match=»/»> <html> <head> <title>Pappmaskin.no – Youtube playlist</title> <link rel=»stylesheet» href=»youtube.css» media=»screen» /> <script type=»text/javascript» src=»youtube.js»></script> <script type=»text/javascript» src=»swfobject.js»></script> </head> <body> <div id=»youtube»> <h1>YouTube Playlist</h1> <xsl:for-each select=»$XML»> <xsl:for-each select=»n1:feed»> <xsl:if test=»n1:entry[1]»> <div class=»youtubevideo»><div id=»cur_video»> <xsl:for-each select=»n1:entry[1]/media:group/media:content»> <xsl:if test=»@type = ‘application/x-shockwave-flash'»> <embed> <xsl:attribute name=»src»> <xsl:value-of select=»@url»/> </xsl:attribute> <xsl:attribute name=»width»>480</xsl:attribute> <xsl:attribute name=»height»>385</xsl:attribute> <xsl:attribute name=»quality»>high</xsl:attribute> <xsl:attribute name=»bgcolor»>#000</xsl:attribute> <xsl:attribute name=»id»>cur_video_swf</xsl:attribute> <xsl:attribute name=»name»>cur_video_swf</xsl:attribute> </embed> </xsl:if> </xsl:for-each> </div> <!– ends cur_video –> <div id=»cur_video_title»> <xsl:value-of select=»n1:entry[1]/n1:title»/> </div> </div> <!– ends youtubevideo –> </xsl:if> <div class=»youtubethumbs»> <xsl:for-each select=»n1:entry»> <xsl:if test=»position() > 1″> <xsl:for-each select=»media:group»> <div class=»youtubethumb»> <xsl:for-each select=»media:content»> <xsl:if test=»@type = ‘application/x-shockwave-flash'»> <a> <xsl:attribute name=»href»>#</xsl:attribute> <xsl:attribute name=»onmousedown»>PlayVideo(‘<xsl:value-of select=»@url»/>’,’http://img.youtube.com/vi/h8oBykb_Pqs/2.jpg’, ‘Youtube’, true);</xsl:attribute> <xsl:attribute name=»onclick»>return false;</xsl:attribute> <xsl:for-each select=»../media:thumbnail[1]»> <xsl:element name=»img»> <xsl:attribute name=»src»><xsl:value-of select=»@url»/></xsl:attribute><xsl:attribute name=»lowsrc»>lowsrc.gif</xsl:attribute><xsl:attribute name=»width»>100</xsl:attribute><xsl:attribute name=»height»>60</xsl:attribute> </xsl:element> </xsl:for-each> <xsl:value-of select=»../media:title»/> </a> </xsl:if> </xsl:for-each> </div> <!– ends avslutter class youtubethumb –> </xsl:for-each> </xsl:if> <!– end if on position > 0 –> </xsl:for-each> </div><!– ends class youtubethumbnails –> </xsl:for-each> </xsl:for-each> <div class=»youtubefooter» style=»clear: both; color: #999999; font-size: 0.8em;»>Disclaimer: These videos are retrieved from Youtube through a simple search. Even though the search is done with a filter to remove «inappropriate material», it may still contain videos deemed offensive by some. Videos may or may not be in violation of international copyright law.</div> </div> <!– avslutter id youtube –> </body> </html> </xsl:template> </xsl:stylesheet>
The PHP
<?php
$searchterm = $_GET[«s»];
$maxresults = $_GET[«max»];
/* load the xml file and stylesheet as domdocuments */
$xsl = new DomDocument();
$xsl->load(«youtube5.xsl»);
$inputdom = new DomDocument();
//Example http://gdata.youtube.com/feeds/videos?format=1&vq=Ratchet+Clank:+Tools+of+Destruction&max-results=2
$inputdom->load(«http://gdata.youtube.com/feeds/videos?format=5&vq=» . $searchterm . «&max-results=» . $maxresults);
//$inputdom->load(«youtube.xml»);
//if you want to test with a local file
/* create the processor and import the stylesheet */
$proc = new XsltProcessor();
$xsl = $proc->importStylesheet($xsl);
//$proc->setParameter(null, «titles», «Titles»);
//not in use, but needed if you want to pass variables into the xslt from php
/* transform and output the xml document */
$newdom = $proc->transformToDoc($inputdom);
print $newdom->saveXML();
exit;
?>
