Enhancing the Default YouTube Player for Portfolio Sites

How to create an enhanced YouTube player for your motion or video portfolio site

Published in

Animoplex

5 min readMay 6, 2019

Video portfolios rely on one crucial element to be successful; a strong video player. In this post, I’ll share code for an enhanced YouTube player that cleans up the default YouTube interface, removes suggested videos from other channels, and dynamically resizes to fit any page width. The player was originally developed for the Animoplex website and now I’d like to share it with you. The best part — if you’re already comfortable with YouTube embedding, you can just swap your existing setup with this one.

Enhanced YouTube Player

The enhanced player uses the default YouTube iframe as a base, wraps it with a container that can resize to any screen width, and adds some new custom parameters to the embed URL:

Added Features:

Responsive video container to fit dynamic page width
Sets video suggestions to only show your channel videos
Adds iframe title attribute for screen readers
Disables YouTube tracking for GDPR compliance
Changes red accent colors to white

Screenshots of **Standard Player** vs. **Enhanced Player** while paused on a video

Steps to Embed the Player

If you’re ready to embed the enhanced YouTube player, open up your site’s HTML and navigate to where the video player will be added.

Required Steps:

Copy and paste the embed code into your page HTML.
Replace YOUTUBEVIDEO with the ID of your video. An example ID looks like 7_hZlzD4fos and is found in the video’s YouTube link.

Optional Steps:

Change max-width to a desired size or remove it altogether.
Edit parameters in the URL to change autoplay behavior, adjust modestbranding options, and allow recommended rel videos from other channels. There are additional parameters for even more options.
If you have a non-standard video size, edit the padding-bottom percentage for a new screen ratio. Calculate this by dividing height by width and move the decimal two places. Ex: 1080 / 1920 = 0.5625 or 56.25%
To enable tracking and history, remove -nocookie from the URL.
Remove the  comments to reduce clutter, they are there for quick reference and reminders.

No custom code options?

Some free website building services like Squarespace and Wordpress ask for a video embed URL and automatically generate the iframe video player. In this case, you can use the enhanced URL that includes YouTube parameters:

https://www.youtube-nocookie.com/embed/YOUTUBEVIDEO?autoplay=1&amp;color=white&amp;modestbranding=1&amp;rel=0

In-Depth Overview of Features

Responsive Sizing

Responsive video size is the enhanced player’s most powerful feature. Your video will fill any available space and respect the width of the container or page. A typical YouTube embed will define the size in the HTML and needs custom CSS to dynamically update. Calculating the perfect height of a standard 16:9 video using variable width is tough without a calculator. The enhanced embed code above automatically resizes your height to retain the right ratio. It uses a percentage ratio of 56.25% (16:9) and will ensure there is no letterboxing or subpixel borders around your video. If you have a non-standard video size, just update the padding value. Square videos will use 100% (1:1) and BluRay will use 42.86% (21:9) instead. You can even set a max width, which defaults to 960px wide. If you’d rather not use responsive width, you can change the CSS style attribute of the first div element to something like width:640px; for a static width.

No-cookie Privacy

Privacy is a hot topic these days. With new GDPR regulations, YouTube cookies pose a privacy concern for some people. Using the enhanced embed code above, videos are loaded from www.youtube-nocookie.com by default which enables YouTube’s enhanced privacy mode:

https://www.youtube-nocookie.com/embed/YOUTUBEVIDEO

This prevents YouTube watch history from storing activity for a user who is logged in to YouTube. It also removes the “Watch Later” button in the video controls since watch history is not being recorded in this mode. Disable this by swapping back to www.youtube.com in the URL.

Video Autoplay

There may be cases where you want a video to autoplay when the webpage loads. This is enabled by default with autoplay=1 included in the embed URL after the video ID. You can disable this with autoplay=0 or by removing the autoplay entirely from the embed URL:

https://www.youtube.com/embed/YOUTUBEVIDEO?autoplay=1

Just be careful if you have multiple video embeds on the same page. And keep in mind, some mobile browsers disable autoplay to reduce cellular data.

Branding Options

For personal portfolios and brands, you want maximum control over how content is represented and displayed. YouTube provides some flexibility over how much branding is visible in the video player. This is one of the downsides of using YouTube’s free video hosting, but there’s some options to take back a little creative control:

https://www.youtube.com/embed/YOUTUBEVIDEO?color=white&amp;modestbranding=1

The first option is to include color=white in the URL, which changes some of the red accents to white in the video controls. The second option is to add modestbranding=1 to the URL which reduces the brand elements to a single YouTube logo in the video controls.

Standard player with distracting recommendations

Final Thoughts

While the default YouTube player can sometimes leave a lot to be desired, the enhanced code above improves many aspects of the video experience. I’ve used Vimeo and YouTube over the years and prefer YouTube for it’s fast mobile experience, wide audience, and free services. Not everyone will agree with this and that is okay. If YouTube doesn’t provide the level of control you require, there are paid services like Vimeo and Wistia that offer limited free services and business-tier options for video hosting.

I encourage you to customize this upgraded YouTube player to fit your own needs. Let it inspire new ideas for your portfolio or business!

This is my second article on Medium, following my first about Getting Started with Expressions in After Effects. I hope you’ve gained some insight on how to improve the YouTube video player for your site. If you’d like to see more of this, clap or comment below to let me know. If there’s an interest, I’ll continue writing posts like this. Thanks for reading!