YouTube streaming gallery

Printer friendly

Today, I will show how to make a YouTube gallery with just CCK/views. Unlike in the flickr gallery tutorial, videos will be added manually.

YouTube url conventions

videos are of the form http://www.youtube.com/v/VIDEO_ID and thumbnails are of the form http://img.youtube.com/vi/VIDEO_ID/default.jpg

create a new content type

We need a content type to store our youtube video information. I will disable the body field as I am not using it, but could easily enable it later for a description field.

Create a textfield to store YouTube IDs. Be sure to set it to required. You can also setup taxonomy terms to classify the video or a multi-select of the regions that this video belongs to - useful if your site has several video areas, with some overlap. Being able to distinguish videos will be necessary when we are creating our view.

create some sample content

Let's create a few sample items with real YouTube ids. Then go to /node/ to view the raw listing of your just created nodes.

views

Next, we setup a view to list our nodes. I called mine 'youtube_videos'. Here's how to set it up:

1. under fields, add content->youtube_id and node->title
2. under sort criteria, I suggest node->nid or node->post date
3. add node->type is one of 'simple youtube video' and node->published or admin to filters

views theming (the real magic)

Like in the flickr gallery tutorial, we are going to override the default 'style output' and 'row style output' templates for our 'page' instance of the theme. Click on Page >> Basic Settings >> Theme: Information to see filenames that will override the current files and click on any of links presented to see the default template for that theme layer.

Create empty files, place them in your active theme directory and click the "Rescan your template files" button. The new files should be bolded. Click the "Ok" button.

In the ...-unformatted-...tpl.php file insert the code <?php drupal_add_js( " $(document).ready(function(){ var src = $('.youtube_0 a img').attr('alt'); var prefix = 'Thumbnail '; src = src.substring(prefix.length); change_embedded_video(src); }); function change_embedded_video(src){ var full_src = 'http://www.youtube.com/v/' + src + '?rel=1&color1=0x2b405b&color2=0x6b8ab6&border=0&fs=1'; $('#embedded_video_embed').attr('src', full_src); $('#embedded_video_movie_param').attr('value', full_src); } " , "inline" ); ?> <div class="player"> <div id="embedded_video_container"> <object width="575" height="325"> <param id="embedded_video_movie_param" name="movie" value=""></param> <param name="allowFullScreen" value="true"></param> <embed id="embedded_video_embed" src="" type="application/x-shockwave-flash" width="575" height="325" allowfullscreen="true"></embed> </object> </div> <ul class="photo-listing"> <?php foreach($rows as $key=>$row){ $html .= "<li style='float: left;' class='youtube_{$key}'>".$row."</li>"; } print $html; ?> </ul> </div>

While in the ...-unformatted-...tpl.php file insert the code <a href='#' onclick='change_embedded_video("<?php print $fields['field_youtube_id_value']->content; ?>");' > <img width="80" height="54" src="http://img.youtube.com/vi/<?php print $fields['field_youtube_id_value']->content; ?>/default.jpg" alt="Thumbnail <?php print $fields['field_youtube_id_value']->content;?>" /> </a>

This will result in the following type of gallery, which you can further style to your liking. You can replace the embedding method with a more cross-browser safe method like swfobject.