Wheat Thins Youtube Channel
The Wheat Thins branded Youtube channel was created for a "How Bold Are You" contest where participants could win a prize based on their Twitter responses. The contest was tweeted by Tracy Morgan at launch.
Details
- Role: Front-end development.
- Languages: HTML, CSS, JavaScript
- Features: YouTube API powered video player, HTML/CSS Development
- Client: Wheat Thins
- Site: youtube.com/wheatthins
- Demo: Wheat Thins Demo
Features
The final product has several subtle features. The video player plays while the rest of the page content is faded out which creates a faux lightbox effect. The twitter box is an image which changes into a text input field on-click. Since it's a Twitter message, I implemented a character counter which also accounts for the hash tags. Finally, the YouTube player fades in and out based on play status.
Challenges
The challenging parts were getting acquainted with the YouTube API and creating a good user experience. The YouTube API doesn't allow for the player's opacity to be changed. In order to get around this, I added an overlay div that mimics the player fading in and out. Last I read about it, the YouTube dev team was planning on implementing an opacity option.