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)		netqualified.com/vid/?v=AnyVideoID
auto (1 = autoplay, default = 0)		netqualified.com/vid/?v=AnyVideoID&auto=1
preload (auto|metadata|none, default = auto)	netqualified.com/vid/?v=AnyVideoID&preload=auto
brand (0 = hide brand overlay, default = auto) 	netqualified.com/vid/?v=AnyVideoID&brand=0
bg  (main theme color, default = ef5350)	netqualified.com/vid/?v=AnyVideoID&bg=FFFFFF
u (unique user's id - load up saved pref.)	/vid/?v=AnyVideoID&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 and are 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.

Source: Custom Youtube Player for Websites