Youtube Video Gallery: Youtube is a most popular website for video sharing created by google. Youtube provides a way for users to create their own channel with google account. Users can subscribe to channel they like. In this tutorial, we are going to display our youtube channel’s videos on our own website with thumbnails. So that users on our website can quickly watch video. Though you can do similar code for any programming language you like. But i will use PHP (an open source scripting language) for this tutorial.
Pre-requisites for Youtube Video Gallery in PHP
- A Youtube Channel with few videos uploaded
- Familiarity with PHP code
- Basic idea about HTML & CSS
- Knowledge of what is XML
- Manipulate XML in PHP code
Youtube Video Gallery in PHP: Let’s Do it
Step 1: Create a PHP file with following code. Or you can use existing one of your website to add following code.
|
1 2 3 4 5 6 |
<?php //fetch xml for youtube channel's videos for creating youtube video gallery $xml = simplexml_load_file('http://gdata.youtube.com/feeds/api/users/YOUR_CHANNEL_NAME/uploads'); ?> |
In above code, We used youtube api to get data from youtube. simplexml_load_file is a PHP function allows us to fetch xml data from URL, load in memory and returns an xml object. we stored xml object in $xml variable. In URL after users we have to put long string that youtube generates for channel instead of YOUR_CHANNEL_NAME. For this example, I have used CodeRiddles’ youtube channel.
Step 2: add following highlighted code in PHP file created in step 1. So your code for php file will look similar to below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php //fetch xml for youtube channel's videos for creating youtube video gallery $xml = simplexml_load_file('http://gdata.youtube.com/feeds/api/users/UCxiaIKXjo25U1AMCBAcplRQ/uploads'); $server_time = $xml->updated; $return = array(); foreach ($xml->entry as $video) { $vid = array(); $vid['id'] = substr($video->id,42); $vid['title'] = $video->title; $vid['date'] = $video->published; // get nodes in media: namespace for media information $media = $video->children('http://search.yahoo.com/mrss/'); // get the video length $yt = $media->children('http://gdata.youtube.com/schemas/2007'); $attrs = $yt->duration->attributes(); $vid['length'] = $attrs['seconds']; // get video thumbnail $attrs = $media->group->thumbnail[0]->attributes(); $vid['thumb'] = $attrs['url']; // get <yt:stats> node for viewer statistics $yt = $video->children('http://gdata.youtube.com/schemas/2007'); $attrs = $yt->statistics->attributes(); $vid['views'] = $attrs['viewCount']; array_push($return, $vid); } echo "<pre>"; print_r($return); die; ?> |
Next we have created a empty array and loop through xml entries, retrieve details that we need from xml object and store details in $return array. then we simply output $return using print_r function. Output will be similar to what we have below.
Step 3: Lets add some CSS to our PHP file for better visual result. I have written style in php file but it is recommended that you write css in separate file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style> body { font-size:12px; font-family:tahoma; } h2 { font-size:13px; } p { line-height:5px; } .youtube-video-gallery { width:930px; margin:auto; } .clearfix { clear:both; } .youtube-video { padding:10px; background-color:#d8d8d8; width:270px; float:left; margin:10px; } </style> |
Step 4: Add following code in same PHP file after style code we added in step 3.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="youtube-video-gallery"> <?php foreach($return as $video) { ?> <div class="youtube-video"> <a href="https://www.youtube.com/watch?v=<?=$video['id']?>" target="_blank"> <img src="<?= $video['thumb']?>" width="270"/> </a> <h2> <a href="https://www.youtube.com/watch?v=<?=$video['id']?>" target="_blank"> <?= $video['title'] ?> </a> </h2> <p>Views: <?=$video['views']?></p> <p>Length: <?=$video['length']?></p> <p>Published on: <?=$video['date']?></p> </div> <?php } ?> <div class="clearfix"></div> </div> |
As you can see I have added few div tags for better result. I sed foreach loop on $result array and output details of video in proper HTML tags. Also note that use of id in link’s href attribute, which redirects user on exact youtube’s video page. Now its time to see what we have in browser window. Navigate to your php file and you will get result similar to what we get below. Our own youtube video gallery.
Remember we created full page youtube video gallery. But you can also create small youtube video gallery for placing in sidebar by reducing width of img tag as required. Have fun with youtube gallery on your own website.
Youtube Video Gallery in PHP Complete Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<?php $xml = simplexml_load_file('http://gdata.youtube.com/feeds/api/users/UCxiaIKXjo25U1AMCBAcplRQ/uploads'); //echo '<pre>'; print_r($xml);die; $server_time = $xml->updated; $return = array(); foreach ($xml->entry as $video) { $vid = array(); $vid['id'] = substr($video->id,42); $vid['title'] = $video->title; $vid['date'] = $video->published; //$vid['desc'] = $video->content; // get nodes in media: namespace for media information $media = $video->children('http://search.yahoo.com/mrss/'); // get the video length $yt = $media->children('http://gdata.youtube.com/schemas/2007'); $attrs = $yt->duration->attributes(); $vid['length'] = $attrs['seconds']; // get video thumbnail $attrs = $media->group->thumbnail[0]->attributes(); $vid['thumb'] = $attrs['url']; // get <yt:stats> node for viewer statistics $yt = $video->children('http://gdata.youtube.com/schemas/2007'); $attrs = $yt->statistics->attributes(); $vid['views'] = $attrs['viewCount']; array_push($return, $vid); } ?> <style> body { font-size:12px; font-family:tahoma; } h2 { font-size:13px; } p { line-height:5px; } .youtube-video-gallery { width:930px; margin:auto; } .clearfix { clear:both; } .youtube-video { padding:10px; background-color:#d8d8d8; width:270px; float:left; margin:10px; } </style> <div class="youtube-video-gallery"> <?php foreach($return as $video) { ?> <div class="youtube-video"> <a href="https://www.youtube.com/watch?v=<?=$video['id']?>" target="_blank"> <img src="<?= $video['thumb']?>" width="270"/> </a> <h2> <a href="https://www.youtube.com/watch?v=<?=$video['id']?>" target="_blank"> <?= $video['title'] ?> </a> </h2> <p>Views: <?=$video['views']?></p> <p>Length: <?=$video['length']?></p> <p>Published on: <?=$video['date']?></p> </div> <?php } ?> <div class="clearfix"></div> </div> |
If you like Youtube Video Gallery in PHP website, please like our Facebook Fan page for regular updates. Thanks to everyone.
Bookmark Link using: 
Pingback: How To Create Youtube Video Gallery in PHP - Co...
Pingback: Code | Pearltrees