Using data from XML file in HTML Document

Question

As the title suggests I would like to be able to use data from a XML file in a HTML page. Let me explain what the page is trying to do in order to help explain what I need help with..

The HTML page when complete will go to the YouTube servers with a search query and retrieve a XML file that is generated from the search with up to date information. Then the page will look into the XML file given, and find the <yt:videoid> node, and transfer the string to the HTML file. Then the HTML file can use the string (probably in javascript) to make the embed video code.

The resulting page will therefore always have the latest video due to the search query.

So far I have found the link to get the XML file (below) and had a look at the XML (Link: https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=1&v=2)

I found out that the information I want is in a node called <yt:videoid> which is under <media:group> which is under <feed>

After doing some research online (as I am not a javascript programmer, I only have a basic knowledge, I found that you can use XML DOM to read and adapt XML files from within an HTML page. But the problem with XML DOM code is that it requires the XML file to be hosted on the actual server itself, which it is obviously not - as it's on youtube.

Does anyone know a way I could just read the data and put it into a javascript variable? I don't necessarily want you to spend ages writing some code, but at least hope you can lead me in the right direction?

Thanks a lot in advanced,

Ant.

PS, Please bear in mind I am not a JS or HTML programmer.. I only know the basics, and if I have done anything wrong in this post please let me know as this is a first for me on stackoverflow.

Answer 1

There is no need to do anything browser side to get the XML or parse it.

Youtube's API is public and allows anyone (?) to query it, meaning you just need a simple ajax call to get the xml file. With some additional jQuery (or any other library) you can then extract the id of the video:

jQuery(document).ready(function() {
    // request xml data
    jQuery.ajax('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=1&v=2',{
        dataType:'xml',
        success: function(data,status, xhr ) {
           // process response
           var $_d =$(data);

           var videoTag = $_d.find('yt\\:videoid'); // doesn't seem to work
           var videoTag = $_d.find('videoid'); // works
           var videoId = videoTag.text();

           // do the embedding
           embedYT(videoId);
        }
    });

   // a simple way to embed a youtube player in a page
   function embedYT(id) {
        jQuery(document.body).append("<iframe class='youtube-player' type='text/html' width='640' height='385' src='http://www.youtube.com/embed/"+id+" frameborder='0'></iframe>")
   }
});

jsFiddle

Answer 2

Example php code:

// content of example.php
<?php

$xml = simplexml_load_file('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=1&v=2');
foreach( $xml->children() as $child) {
    if($child->getName() == 'yt:videoid'){
        echo $child->asXML();
    }
}

?>

Example jQuery code:

var ytUrlThing;
$.post('example.php', function(data) { ytUrlThing = data; });