Youtube Preview Card

This is a Chrome Extension project that implements a preview card for YouTube videos. When you hover over a YouTube video, the preview card will show the number of likes and comments for the video.

Chrome Extension Store page

Google Drive link

Here's screenshots.

Technologies Used

This project uses the following technologies:

• HTML
• CSS
• JavaScript
• jQuery
• YouTube API

Implementation

The preview card is implemented using jQuery. When the user hovers over a YouTube video, a preview card is displayed with the like count and comment count. The preview card is positioned using CSS and styled using CSS styles.

Patch Notes and Future Updates

As I continue to develop the Youtube Preview Card, I plan to make several improvements. One area that I plan to focus on is disabling the original Youtube hover effect. Currently, my extension works by overlaying a custom preview card over the original card, but sometimes the original hover effect still appears. To address this, I will work on finding a more robust solution to completely disable the original hover effect.

In addition, I want to improve the card animation and content. Right now, the card displays the video's like and comment count, but I plan to incorporate more information, such as the video's tags and thumbnail. I also want to improve the card's design to make it more visually appealing and user-friendly.

Another area that I plan to explore is integrating more Youtube APIs. For example, I could use the Youtube Data API to pull in more data about the video, such as its view count and upload date. I also plan to analyze popular publisher's styles and incorporate these findings into my extension.

Overall, I am committed to continuously improving the Youtube Preview Card with the best possible experience. Stay tuned for future updates and patch notes!

Conclusion

This project demonstrates the use of jQuery and CSS to create a preview card for YouTube videos. It provides a useful feature for users who want to quickly see the number of likes and comments for a video. Next steps will be optimize animation and content.