Video player | BlackRock Design System

Video player (vi20)

Our vi20 Video player component is meant to highlight video content. All video appearances are fully responsive and have baked-in ADA standards (i.e. transcripts, closed captioning, & coming soon — audio descriptions).

There are 2 main appearance types, both with multiple layout appearances:

Side by side:
- Standard, Pull quote, Key points, and our newest Offset appearance
Paragraph width:
- With or without a full video playlist
All main appearances have the ability to remove component-level top padding on or off
- Note: Use this is to solve “double” padding issues when stacking similar colored components together which may cause large gaps to appear, and get pre-approval for guidance from the Design Platform team

Publishing? View the DCR guidebook for detailed instructions.

Paragraph-2,Video Player-1,Paragraph-3,Video Player-2,Paragraph-4,Video Player-3,Paragraph-5,Advance Static Table-1

Paragraph-6,Video Player-4,Paragraph-7,Advance Static Table-2,Paragraph-8,Video Player-5,Video Player-6

Paragraph-9,Video Player-7,Video Player-8,Paragraph-10,Advance Static Table-3,Paragraph-11,Video Player-9,Video Player-10

Paragraph-12,Video Player-11,Video Player-12,Paragraph-13,Advance Static Table-4,Video Player-13,Video Player-14

Standard appearances

Both our Standard & Pull quote appearances have a small or large video player size choice. You can alternate orientations (video left or video right), turn off headlines, CTA’s, and top-padding.

PRO TIP: When stacking this component, stagger the orientation to help create a good visual flow. Also consider the color usage rules and content in terms of the entire page layout. If the videos are part of a series, you may want to keep the background colors the same.

Standard / Small video:

Use this option when the information contained needs less emphasis than our large appearance
It is an exact mirror of our CTA with image “medium appearance”, so if your content needs require both a static photography component with a video component, this would be a good match
The left aligned option aligns the video to our paragraph content block for visual continuity, or you can right align the video so the copy block aligns perfectly to the paragraph copy above/below it.

Video Player is loading.

Current Time 0:00

Loaded: 0%

To help solve climate change, the world needs to transition to using more renewable energy.
Supporting innovation in renewable power is essential to a clean energy future.
Globally, our client investments focused on renewable power have:
Powered more than 2.5 million homes with clean energy.
Saved 360 million cubic meters of water - enough to fill more than 140,000 Olympic-sized pools,
and avoided just over 85 million tons of emissions - that’s like taking 36 million cars off the road.
This is one way we’re helping to build a more sustainable future and transition the planet to net zero.
END CARD: “BLACKROCK // Advancing Sustainability”

Small video appearance: video left

We work only for our clients. Our promise is to give them insight into what to do with their money, providing products and services that can help them build a better financial future.

Optional link Optional link

Standard / Large video:

Use this option for a more impactful hero video, or a campaign page when you want to highlight a video
It is an exact mirror of our CTA with image “large appearance”, so if your content needs require both a static photography component with a video component, this would be a good match
The left aligned option aligns the video to our paragraph content block for visual continuity, or you can right align the video so the copy block aligns perfectly to the paragraph copy above/below it.

Video Player is loading.

Current Time 0:00

Loaded: 0%

We work only for our clients. Our promise is to give them insight into what to do with their money, providing products and services that can help them build a better financial future.

Large video appearance: video left

We work only for our clients. Our promise is to give them insight into what to do with their money, providing products and services that can help them build a better financial future.

Optional link Optional link

Pull quote appearance

Our quote appearance can be used in either sized video (small or large), and has both orientation layouts available. It is a good option when you want to draw in the user by highlighting an important quote specific to the video, which may help with video engagement.

Video Player is loading.

Current Time 0:00

Loaded: 0%

We work only for our clients. Our promise is to give them insight into what to do with their money, providing products and services that can help them build a better financial future.

“

We work only for our clients. Our promise is to give them insight into what to do with their money, providing products and services that can help them build a better financial future.

— BlackRock

Rules and recommendations

Component element	Optional element	Rules
A: Background color options (all appearances)		• BLK_Black • BLK_White (with optional top & bottom border) • BLK_Neutral • BLK_Orange • BLK_Yellow • BLK_Pink
B: Video player		• Video alignment: left or right • There are two types of sources available: - BlackRock videos: Uploaded to Video Transcoder Application. Publisher needs to provide the video ID in the DCR - YouTube videos: These are videos available on YouTube. Publisher needs to provide YouTube video ID in the DCR Video thumbnail: - If you would like to provide a thumbnail, please pick one from our Brand library and provide it as a graphic to your publisher - Recommended dimensions: 752x423px (16:9 ratio)
b1: Player options		• Social share is an optional selection in the DCR. It must be selected to enable this functionality (notify your publisher if you wish to include this) • To enabling CC (Captions) and AD (Audio descriptions), files for the respective video should be uploaded to Video Transcoder Application
C: Transcript		• Please note that transcript is mandatory for US and Canada but optional for other sites - Leaving this empty will hide the transcript section of the player. Hence, for the best user experience please add a transcript • Manually insert transcript • No character limit
D: Headline		• Character count: ~70* • Hard coded character limit • Available for both Standard and Pull quote appearances
E: Description / Pull quote		• Can be a short blurb or pull quote • Full text formatting abilities: i.e. You can bold, italicize, hyperlink, etc. • Character counts for either choice: ~350* • Do not include quotation marks, these are hard coded • Attribution should be included for Pull quote (no character limit)
F: Component CTA		• CTA can be either a primary button or a tertiary link • Keep these "digital" friendly; i.e. short descriptors
*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release

Growth of the strategy

Video Player is loading.

Current Time 0:00

Loaded: 0%

Today, the world emits about 60 gigatons of greenhouse gas a year to power the economy and our lives.

So, think the food we eat, how we get places, where we work, how we live.

We can’t turn all of that off overnight but we can take steps to get on a path to a net zero world.

BBL open

Title: The net zero economy is arriving

Net zero is about reducing greenhouse gas emissions so that over time we can achieve an overall balance between emissions produced, and the emissions removed from the overall atmosphere. So, for every ton of greenhouse gas we emit into the air, we would take a ton out.

(Graphic text: Net zero = Greenhouse gas emissions produced ≤ emissions remove)

(Graphic/text animation) The latest science shows that if we reach net zero by midcentury, essentially if we achieve the goals outlined in the Paris Agreement, it would limit global warming to well below 2°C versus pre-industrial levels.* If we exceed that level, scientists say that we’ll suffer from the most detrimental climate impact.

*Source: Climate Council, “What does net zero emissions mean?,” 2020

(Graphic/ text animation)

To date, 127 governments around the world and over 1,000 companies have made or are preparing to make net zero commitments. And we expect that number to go up.

*Source: Climate Action Tracker, “Warming Projections Global Update” December 2020 and UN News, “UN chief stresses need for greater speed to achieve carbon neutrality,” November 9, 2020

This is also being reflected in the financial system. Regulators are making climate risk disclosure mandatory, central banks are stress testing for climate risk, and policymakers around the world are collaborating to achieve common climate goals.

Climate change is a collective problem that requires collective global action. People have to understand that achieving net zero in 2050 isn’t something we can start in 2049, we have to start today.

Lastly, and most importantly, as with any transition, we have to make sure it’s a just transition. We really have to work together to make sure that no one group, whether it’s a community or an industry gets disproportionately left behind.

The bottom line is that achieving global net zero emissions by 2050 is our best chance at mitigating the worst impacts of climate change. // This is going to a large structural change in our economy. // And companies that manage to evolve and adapt their business models are going to be rewarded by the financial markets over the long term.

Key point subheadline

Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

Key point subheadline

Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

Key point subheadline

Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.

Optional button Optional button

Component element	Optional element	Rules
A: Background color options		• BLK_Black • BLK_White (with optional top & bottom border) • BLK_Neutral
B: Video player		• Video alignment: left or right • There are two types of sources available: - BlackRock videos: Uploaded to Video Transcoder Application. Publisher needs to provide the video ID in the DCR - YouTube videos: These are videos available on YouTube. Publisher needs to provide YouTube video ID in the DCR Video thumbnail: - If you would like to provide a thumbnail, please pick one from our Brand library and provide it as a graphic to your publisher - Recommended dimensions: 752x423px (16:9 ratio)
b1: Player options		• Social share is an optional selection in the DCR. It must be selected to enable this functionality (notify your publisher if you wish to include this) • To enabling CC (Captions) and AD (Audio descriptions), files for the respective video should be uploaded to Video Transcoder Application
C: Transcript		• Please note that transcript is mandatory for US and Canada but optional for other sites - Leaving this empty will hide the transcript section of the player. Hence, for the best user experience please add a transcript • Manually insert transcript • No character limit
D: Headline		• Character count: ~70* • Hard coded character limit • Choose between our Large headline (40px extrabold) or a Medium headline (32px bold)
E: Key point bullets		• Key point sub-headline character count (optional): ~70* • Key point description character counts (per bullet): ~200* • Full text formatting abilities: i.e. You can bold, italicize, hyperlink, etc. • Maximum of 4 bullets (no minimum but we recommend no less than 2)
F: Component CTA		• CTA can be either a primary button or a tertiary link • Keep these "digital" friendly; i.e. short descriptors
*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release

Component element	Optional element	Rules
A: Background color options (all appearances)		• BLK_Black • BLK_Neutral • BLK_Orange • BLK_Yellow • BLK_Pink
B: Video player		• Video alignment: left or right • There are two types of sources available: - BlackRock videos: Uploaded to Video Transcoder Application. Publisher needs to provide the video ID in the DCR - YouTube videos: These are videos available on YouTube. Publisher needs to provide YouTube video ID in the DCR Video thumbnail: - If you would like to provide a thumbnail, please pick one from our Brand library and provide it as a graphic to your publisher - Recommended dimensions: 752x423px (16:9 ratio)
b1: Player options		• Social share is an optional selection in the DCR. It must be selected to enable this functionality (notify your publisher if you wish to include this) • To enabling CC (Captions) and AD (Audio descriptions), files for the respective video should be uploaded to Video Transcoder Application
C: Transcript		• Please note that transcript is mandatory for US and Canada but optional for other sites - Leaving this empty will hide the transcript section of the player. Hence, for the best user experience please add a transcript • Manually insert transcript • No character limit
D: Headline		• Character count: ~70* • Hard coded character limit • Available for both Offset and Pull quote - Offset appearances
E: Description / Pull quote		• Can be a short blurb or pull quote • Full text formatting abilities: i.e. You can bold, italicize, hyperlink, etc. • Character counts for either choice: ~350* • Do not include quotation marks, these are hard coded • Attribution should be included for Pull quote (no character limit) - Attribution name can by hyperlinked to author’s bio • Attribution job/role title is available
F: Component CTA		• CTA can be either a primary button or a tertiary link • Keep these "digital" friendly; i.e. short descriptors
*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release

Player without playlist option

This is part of the component, and has a 750 character limit. High-speed 5G mobile technology is a step-change from the previous four generations. Greater bandwidths and faster Internet speeds are just the start. The key attributes of 5G – massive data capacity and ultra-fast speeds – could empower and accelerate the application of AI across industries, enabling advances in areas from driverless cars to smart cities and telemedicine.

Video Player is loading.

Current Time 0:00

Loaded: 0%

To achieve the global ambition of keeping global warming to 1.5 degrees, we need to rapidly decarbonize our economies to a point where we’ve got net zero emissions by 2050

BlackRock Bottom Line
Decarbonization and the road to a net zero economy

Teresa O’Flynn
Global Head of Sustainable Investing for BlackRock Alternatives Investors

So if we work back, we need to reduce carbon emissions by about 1.7 billion tons each year between now and 2050.
Source: Breakthroughenergy.org, “Getting to zero: The most ambitious innovation effort in human history,” August 2020 https://www.breakthroughenergy.org/our-challenge/getting-to-zero

To put that figure in context, COVID-19, which saw unprecedented disruption to economic activity and travel, saw carbon emissions fall by about two billion tons in 2020.

Electrification of our energy systems, digitalization and technological advancement are all at the center of achieving decarbonization.

Decarbonization has three major components. Firstly, using less energy. Energy efficiency of equipment, of buildings, of manufacturing but also affecting the demand side so consuming less. Moving towards the shared economy.

Secondly, supplying the world with clean energy, such as green electricity. Also, the supporting infrastructure and storage capacity that’s necessary to deliver a fossil-free grid. Accelerating new energy sources such as hydrogen but also renewable fuels, particularly for those hard to decarbonize sectors such as aviation.

And finally, actively taking carbon out of the system. And this includes nature-based solutions such as reforestation but also developing the technology that will capture carbon from the atmosphere, store it and possibly utilize it.

Governments play a critical role in setting the right kind of policy and regulatory environment. And we’re also seeing ambition increase in the corporate sector. And so far, over 1,500 companies have set net zero targets. We’ve seen industry get together around the trickier to decarbonize sectors such as heavy industry and manufacturing.

Bottom Line GFX

The bottom line is that the world is on a massive transformational path propelling us towards a zero-carbon and digital future. We believe that this represents a historic investment opportunity and that investors will be better served by being on the forefront of this transition.

To achieve the global ambition of keeping global warming to 1.5 degrees, we need to rapidly decarbonize our economies to a point where we’ve got net zero emissions by 2050

BlackRock Bottom Line
Decarbonization and the road to a net zero economy

Teresa O’Flynn
Global Head of Sustainable Investing for BlackRock Alternatives Investors

To put that figure in context, COVID-19, which saw unprecedented disruption to economic activity and travel, saw carbon emissions fall by about two billion tons in 2020.

Electrification of our energy systems, digitalization and technological advancement are all at the center of achieving decarbonization.

Bottom Line GFX

Component element	Optional element	Rules
A: Background color options		• BLK_Black • BLK_White (with optional top & bottom border) • BLK_Neutral
B: Headline		• Character count: ~70* • Hard coded character limit • Choose between our Large headline (40px extrabold) or a Medium headline (32px bold)
C: Description		• Can be a short blurb • Full text formatting abilities: i.e. You can bold, italicize, hyperlink, etc. • Character counts for either choice: ~750* • If your content needs more than the built-in character limit, just use our paragraph component • Can have the headline without the intro blurb (or vice-versa)
D: Video player		• Video alignment: left or right • There are two types of sources available: - BlackRock videos: Uploaded to Video Transcoder Application. Publisher needs to provide the video ID in the DCR - YouTube videos: These are videos available on YouTube. Publisher needs to provide YouTube video ID in the DCR Video thumbnail: - If you would like to provide a thumbnail, please pick one from our Brand library and provide it as a graphic to your publisher - Recommended dimensions: 752x423px (16:9 ratio)
d1: Player options		• Social share is an optional selection in the DCR. It must be selected to enable this functionality (notify your publisher if you wish to include this) • To enabling CC (Captions) and AD (Audio descriptions), files for the respective video should be uploaded to Video Transcoder Application
E: Transcript		• Please note that transcript is mandatory for US and Canada but optional for other sites - Leaving this empty will hide the transcript section of the player. Hence, for the best user experience please add a transcript • Manually insert transcript • No character limit
F: Playlist		• Playlist has to be created manually by adding video IDs in the correct order in DCR • Transcript should be added manually or each video in the playlist • Video titles are NOT auto-populated. These should be added manually in the DCR and they are mandatory for a playlist • Timestamp will be auto-populated
*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release

Video player (vi20)

Standard appearances

Standard / Small video:

Small video appearance: video left

Standard / Large video:

Large video appearance: video left

Pull quote appearance

Rules and recommendations

Key points appearance

Growth of the strategy

Rules and recommendations

Alternate variations

Growth of the strategy

Side by side - Offset & Pull quote - offset appearances

This optional headline has 70 characters max

Rules and recommendations

Alternate variations

Paragraph appearance

Player without playlist option

Player with playlist option

Rules and recommendations

Alternate variation example