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.

Source: Custom Youtube Player for Websites

perm_identityAli Jaffar

schedule

visibility1595 reads

labelMarked:

Did you enjoy this post?  


menu