How to enable YouTube’s upcoming Material Design face lift ahead of release

By , May 11, 2016

Chrome for OS X Material Design Mac screenshot 007

YouTube is getting Google’s Material Design refresh pretty soon and it looks pretty neat. Aside from the Upload button being replaced by the upload arrow graphics consistently used across Google’s mobile apps, you’ll notice a Material Design-inspired search field in the center.

More importantly, YouTube’s new looks include the background color on the Channel pages matching the header image, rounded icons in the sidebar, more whitespace around videos in the video player and a few other minor changes.

Chrome users can have an advance look at the upcoming refresh right now. Here’s how you can enable Material Design on YouTube ahead of its release, in just a few clicks.

YouTube’s Material Design UI only works on the Worldwide (US) region setting.

Moreover, it currently doesn’t work if you’re logged in so we’re going to use a private-browsing mode to ensure you’re not logged into an account before switching to Material Design.

How to enable YouTube’s Material Design interface

1) Launch Chrome on your Mac or Windows PC and enter a private-browsing mode by opening an Incognito window (File → New Incognito Window).

Chrome for OS X how to enable Material Design Mac screenshot 001

2) In the new Incognito window, visit YouTube’s Worldwide (US) interface by typing www.youtube.com/?gl=US into the URL field at the top.

Chrome for OS X how to enable Material Design Mac screenshot 002

3) Open Chrome’s developer tools: on the Mac, press Command (⌘)-Option (⌥)-I, or Control (⌃)-Shift (⇧)-I if you’re on Chrome for Windows.

Chrome for OS X how to enable Material Design Mac screenshot 003

You’ll see Chrome’s developers tools that let you examine the page’s source and more.

4) Click the Resources tab at the top.

Tip: If you don’t see the Resources tab, simply make the Chrome window a bit wider until it appears in the toolbar at the top.

5) Expand the Cookies section and click the www.youtube.com entry.

Chrome for OS X how to enable Material Design Mac screenshot 006

6) Now delete the VISITOR_INFO1_LIVE cookie for the youtube.com domain: right-click the entry and choose Delete in the popup menu.

Chrome for OS X how to enable Material Design Mac screenshot 007

7) Now click Console in the toolbar at the top.

Chrome for OS X how to enable Material Design Mac screenshot 008

8) Paste the following by right-clicking an empty field in the Console, then choose Paste:

document.cookie="VISITOR_INFO1_LIVE=Qa1hUZu3gtk;path=/;domain=.youtube.com";

Chrome for OS X how to enable Material Design Mac screenshot 009

Press Enter after pasting the aforementioned line.

Chrome for OS X how to enable Material Design Mac screenshot 010

If all goes well, another line should automatically appears below the one you just pasted, with the new cookie definition, as shown on the screenshot below.

Chrome for OS X how to enable Material Design Mac screenshot 011

9) Now click Chrome’s Reload button, or choose View → Reload This Page.

10) Close out Chrome’s developer tools.

Congratulations, you can now enjoy YouTube’s upcoming Material Design refresh!

Hat tip for these instructions to Reddit user GiorgioMarinel.

A quick tour through YouTube’s Material Design refresh

While changes to YouTube’s interface are not as deep and profound as some people might have been hoping for, from a design and usability standpoint the new-look interface makes YouTube more in line with Google’s other revamped services.

Material Design, Google’s design language for mobile, desktop and web development, has been rolling out in the past year or so to Google’s most important properties like Gmail, Google+ and more, with the ultimate goal of unifying the look and feel of the search company’s many offerings across devices, screens and form factors.

Here are a few screenshots of Material Design on YouTube to feast your eyes on.

Chrome for OS X Material Design Mac screenshot 001
A Material Design-inspired search bar, centered at the top.

Chrome for OS X Material Design Mac screenshot 002
Circular icons make YouTube’s sidebar more stylish than before.

Chrome for OS X Material Design Mac screenshot 003
Channels’ backgrounds are automatically color-matched to the header image.

Chrome for OS X Material Design Mac screenshot 004
Notice how the updated interface is a bit more flatter than before.

Chrome for OS X Material Design Mac screenshot 005
Channels’ sub-sections sport a more refined look, too.

Chrome for OS X Material Design Mac screenshot 006
The built-in video player now has more whitespace around videos.

Google has not made any promises regarding when the new-look YouTube UI might go live, but it shouldn’t be weeks, not months, given they’re testing the new design.

Feel free to submit your how-to suggestions at tips@iDownloadBlog.com.

Need help? Ask iDB!

Got stuck? Not sure how to do certain things on your Apple device? Let us know at help@iDownloadBlog.com and a future tutorial might provide a solution.

  • Share:
  • Follow:
  • Favna

    This… looks really cool. Well done Google.

  • Hans

    Or you can download “Inked” Chrome extension.

    • Luis Andrade

      Inked looks pretty cool 😀

  • Ángel Javier Esquivel

    Will it work with Safari?

  • James G

    Bout time companies start to create some consistency between their mobile/app and web presence.

  • Jack Plays

    I don’t see the resources tab even after expanding it

  • Alexandru Dordescu

    When not connected on youtube the ui works but when I connect ui does not work. What can i do ?