How to Easily display Youtube videos using XSLT transformation

How to Easily display Youtube videos using XSLT transformation

8 76825

Youtube videos with XSLT. Today we will create application which will show our Youtube videos. Also we will draw youtube player for our videos. We will use XSLT transformation to parse XML provided by Youtube API. I will using my profile for our sample. Youtube API providing next path for XML feed: http://gdata.youtube.com/feeds/api/users/AramisGC/uploads. So, we have all to start. Today I`ll show you how to display this information in any view.

Here are samples and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]


Ok, download the source files and lets start coding !


Step 1. PHP

Ok, here are all used PHP files:

index.php

This file will generate list of Youtube videos. Quite all code commented, so I hope it will easy to understand it.

<?php
$sMethod = 'http://gdata.youtube.com/feeds/api/users/AramisGC/uploads';
$sXmlSrc = getYtbXml($sMethod);
// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);
// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/youtube.xslt');
$proc = new XSLTProcessor; // configure the transformer
$proc->importStyleSheet($xsl); // attach the xsl rules
echo $proc->transformToXML($xml);
// this function get youtube information using caches (not more than 1 times per hour)
function getYtbXml($sUrl) {
    // our folder with cache files
    $sCacheFolder = 'cache/';
    // cache filename
    $sFilename = date('YmdH').'.xml';
    if (! file_exists($sCacheFolder.$sFilename)) {
        $ch = curl_init($sUrl);
        $fp = fopen($sCacheFolder.$sFilename, 'w');
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_HTTPHEADER, Array('User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.15) Gecko/20080623 Firefox/2.0.0.15') ); // makes our request look like it was made by Firefox
        curl_exec($ch);
        curl_close($ch);
        fclose($fp);
    }
    return file_get_contents($sCacheFolder.$sFilename);
}
require_once('footer.html');
?>

Step 2. CSS

Here are used CSS file. Just few styles for our demo:

css/styles.css

h1{text-align:center}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.main{background:#FFF;width:900px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
.main div.video_block{width:640px;float:left;text-align:left;display:block;min-height:400px;padding:5px}
.main div.video_thumbs img{border-width:0px}
.main div.thumb{float:left;width:100px;height:110px;overflow:hidden;margin:6px}

Step 3. XSLT

And, most interesting part of my story – used XSLT rules:

xslt/youtube.xslt

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:media="http://search.yahoo.com/mrss/" xmlns:n1="http://www.w3.org/2005/Atom" >
    <xsl:variable name="XML" select="/"/>
    <xsl:template match="/">
        <html>
            <head>
                <link media="screen" href="css/styles.css" type="text/css" rel="stylesheet"/>
                <script type="text/javascript" src="js/swfobject.js"></script>
                <script type="text/javascript" src="js/youtube.js"></script>
            </head>
            <body>
                <div class="main">
                    <h1>My videos</h1>
                    <xsl:for-each select="$XML">
                        <xsl:for-each select="n1:feed">
                            <xsl:if test="n1:entry[1]">
                                <div class="video_block">
                                    <div id="view_video">
                                        <xsl:for-each select="n1:entry[1]/media:group/media:content">
                                            <xsl:if test="@type = 'application/x-shockwave-flash'">
                                                <embed width="640" height="385" name="view_video_swf" id="view_video_swf" bgcolor="#000" quality="high">
                                                    <xsl:attribute name="src">
                                                        <xsl:value-of select="@url"/>
                                                    </xsl:attribute>
                                                </embed>
                                            </xsl:if>
                                        </xsl:for-each>
                                    </div>
                                    <div id="view_video_title">
                                        <xsl:value-of select="n1:entry[1]/n1:title"/>
                                    </div>
                                </div>
                            </xsl:if>
                            <div class="video_thumbs">
                                <xsl:for-each select="n1:entry/media:group">
                                    <div class="thumb">
                                        <xsl:for-each select="media:content">
                                            <xsl:if test="@type = 'application/x-shockwave-flash'">
                                                <a href="javascript:void(0)">
                                                    <xsl:attribute name="onclick">playVideo('<xsl:value-of select="@url"/>','<xsl:value-of select="../media:title"/>');</xsl:attribute>
                                                    <xsl:for-each select="../media:thumbnail[1]">
                                                        <img width="100px" height="60px">
                                                            <xsl:attribute name="src"><xsl:value-of select="@url"/></xsl:attribute>
                                                        </img>
                                                    </xsl:for-each>
                                                    <xsl:value-of select="../media:title"/>
                                                </a>
                                            </xsl:if>
                                        </xsl:for-each>
                                    </div>
                                </xsl:for-each>
                                <div style="clear:both"></div>
                            </div>
                        </xsl:for-each>
                    </xsl:for-each>
                </div>
                <xsl:comment>Copyright © AndrewP</xsl:comment>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Step 4. JS

Here are two JS files:

js/youtube.js

function playVideo(url, title) {
    obj = new SWFObject(url, "view_video_swf", "640", "385", "7");
    obj.write("view_video");
    document.getElementById('view_video_title').innerHTML = title;
}

This file contain only one easy function which will allow us to play another videos

js/swfobject.js

This is just SWFObject class. Available as a download package.

Step 5. Few important notes

During checking my PHP file you will notice that I perform caching of Youtube API XML requests. I don`t load provided RSS often that once per hour. No need overload Youtube server with often requests :)

I made ‘cache’ folder with permission to write (you should create ‘cache’ folder too).

Also I created .htaccess file in it with next content:

Options -Indexes

Thats all.


Live Demo

Conclusion

I hope that today’s article will very useful for your projects. Good luck!

SIMILAR ARTICLES

Stream Radio Script

57 309120

8 COMMENTS

  1. Hey Andrew, the demo is not working. All am getting is this… http://img831.imageshack.us/img831/5340/screenphpdemonotworking.png

    • Hello Ram,
      It is possible that youtube returns 50 videos a page (by default). And I think that there should be some param (for address) to handle with pagination

  2. Fatal error: Call to undefined function curl_init() in C:\wamp\www\New folder\example34\index.php on line 28
    it give me this error hlp plz:)

Leave a Reply to Baja903 Cancel reply