Custom Youtube Video Player with Branding
Custom styling YouTube is now easier than ever. I've begun alpha testing across my websites, and it's been approved as a Twitter card!
UPDATE (11/27): Versions 1 & 2! They're both awesome and have their caveats. The one below works to deliver HTML5-first, the one on top works with a flash-forward 'fallback' -- which means it'll even work as low as IE 6/7, though it won't support 360 degree video.
UPDATE (11/13): I will be putting creating a custom YouTube player/generator on Key Medium for anyone who has a website or app and wants to use it.
It will be super simple to utilize and forever free. Within a few short weeks, I bet it's going to be feature rich -- with sharing capabilities, some other awesome features, and likely -- analytics so you can see how many hits your videos are getting!
So it took me a while, but I got a pretty fantastic result, as well as a more in-depth understanding of Video.js. Checkout my result above; I incorporated my own branding and created a simple API with PHP. Here's what I have planned for the video player project:
Custom Youtube Video Player with Branding (current features): - Full-screen, responsive, and 100% embeddable via iFrame. - Supports IE8 (I guess some people still use it, meh.) - Performance optimized: minified files, base64 encoded brand image, prefetched DNS, in-page scripts (really small amount of HTTP requests)
- Planned Features: + 1) Share dialog & links, + 2) Content recommendations/content gallery, + 3) Call to actions (newsletter + button overlays), + 4) Twitter + in-website players, + 5) Material icons + other UI upgrades, + 6) More sources (like Daily Motion, Vimeo), + 7) Easy theme builder - web-based & free for all. + 8) Analytics to keep track of video views How I use it -- I pass through the following (as a HTTP GET request): v (YouTube id, default = B0gyLz_NJi8) /youtube.php?v=anyYoutubeId auto (1 = autoplay, default = 0) /youtube.php?auto=1 preload (auto|metadata|none, default = auto) /youtube.php?preload=auto brand (0 = hide brand overlay, default = auto) /youtube.php?brand=0 bg (main theme color, default = ef5350) /youtube.php?bg=FFFFFF u (unique user's id - load up saved pref.) /youtube.php?u=ali (coming soon)
In searching for methods to stop embedded videos from linking-out, I decided to look more into Video.js -- an awesome HTML5-based video player, which I used in the past for several projects. I actively use it -- like on this video, which I custom styled using LESS with designer.videojs.com.
In my search, I happened to come across a paid service (reEmbed) which incorporates video.js, along with this awesome extension of it -- videojs-youtube, as well as some widgets on top. It seems like a reliable service, as they've already served up over 2 billion views! And actually, they do offer a free version -- but it features their logo. Yuck!
Rather than using their free, branded version, I'll need to work up a solution of my own and perhaps open-source it. A custom-styled player can definitely help keep users on a site for longer -- by recommending more site-specific videos at the end -- either through YouTube's iFrame API, which can help do this with developer tagging -- or through a custom content gallery. Also, a custom video player would absolutely flow better within a site/app than the generic YouTube player would.
So, as I write this -- I am currently in the process of working up a custom version to be able to customize all of my embedded videos -- from YouTube to Daily Motion, to self-hosted H.264 (.mp4), .webm and theora (ogg/ogv) encoded videos. It should be an interesting integration over the next couple of hours/days. Perhaps I'll work on integrating a backend PHP-based API for adding a share widget overlay, newsletter option, and a site-specific content gallery. There are tons of pre-made video.js plugins here, I will be looking into them also.
More updates (and possibly code + player themes) coming soon! Credit: Video.js by Brightcove, videojs-youtube by @eXon, and videojs-imageOverlay by FunnyorDie.com.