How to Easily display Youtube videos using XSLT transformation

Date: 10th Mar 2011 Author: admin 6 Comments
Posted in: Flash, XSLT |Tags: , , , ,

How to Easily display Youtube videos using XSLT transformation

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
download in package

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
download in package

Conclusion

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

Enjoyed this Post?

    Tweet
   
   

Stay connected with us:

If you enjoyed this article, feel free to share our tutorial with your friends.

6 Comments

    • james o's Gravatar
    • Baja903's Gravatar
    • Hey Andrew, the demo is not working. All am getting is this… http://img831.imageshack.us/img831/5340/screenphpdemonotworking.png

    • Ram's Gravatar
    • Hey Andrew,
      have you tried with fetch next some how.
      this works good, but it is fetching only 50 at max.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

CAPTCHA Image
Refresh Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>