YouComment – A Fancy Video Comment Reader

I have added another page to my collection of “value added services” for YouTube users. This one is an improvement over the YouTube comment system. You can find it on my web site at: 

The comment system is an important part of YouTube’s social networking features which also include video responses, private messages, bulletins, and channel comments. A video which receives a lot of comments will appear on the most discussed list. However, there have been many complaints about the YouTube comment system. The biggest problem is that comments can disappear because YouTube replicates their database and it does not always remain in sync. They also have not done much with the comment system.

I prefer the LiveVideo comment system because it places a small thumbnail of the user profile image next to each comment. This makes it easier to identify the participants in the conversation. YouTube currently only shows the username of the person making the comment.

Since there are so many trolls and miscreants on YouTube, it is frequently necessary to check out a user’s profile when they leave a nasty comment. This can be pretty time consuming and gives them a channel view count they may not deserve. So I used the alt text and title tag attributes to show some user profile information which appears when you mouse over the user profile image (see screen shot below). Such tool tips are an easy way to supply more information without cluttering up the screen. Unfortunately many web sites don’t take advantage of tool tips and surfers may not know to look for them.

I wanted to make this tool visually appealing so I added a speech balloon around the comments. This is another graphic design element that you can find on many other web sites. This was accomplished using Cascading Style Sheet rules to apply background images to blockquote tags.

The programming for YouComment was quite difficult. First I had to figure out how to nest comments which are replies to previous comments. The logical way to do this was to use nested unordered lists. The YouTube API returns the comment data as XML so the nested unordered lists had to match the structure of nested XML nodes.  However, the YouTube API does not actually nest replies under their associated comments. There is merely an id number pointing to the previous comment. I had to re-organize the XML nodes to give them the structure that I required.

Looking up the user profile information for each comment was proving to be a time consuming operation and it was frequently redundant if the same user left multiple comments on the video. Therefore I created a hash table to store the unique user profile information and only made web requests when the user could not be found in the hash table. This has improved the web page’s performance but it still cannot handle a video with more than a hundred comments. After that you’ll find the browser acting flaky because it is using too much memory. I may need to add pagination to reduce the number of comments appearing at one time.

Most people view the comments on a video to see the replies to their comment. It can be difficult to find your comment in a page with hundreds of comments. Computer savvy users know how to use the  Ctrl + F shortcut to find text on a web page. I wanted a way to highlight your comments so I added the option to store your YouTube username in a cookie. The cookie can then be used to remember your username between visits and highlight your matching comments with a yellow background.

I’m very proud of this programming exercise and I plan to use it myself. I spend a lot of time reading comments that have been left on videos. Since I’ll be using this regularly, you can be sure that I will promptly fix any bugs and make improvements if it proves to be hard to use.

This entry was posted in CSS, General, Programming, Vlogging, Web and tagged , , , , , , , . Bookmark the permalink.

One Response to YouComment – A Fancy Video Comment Reader

  1. Pingback: Youtube » YouComment - A Fancy Video Comment Reader

Leave a Reply

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

Time limit exceeded. Please complete the captcha once again.