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 imagemedium 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.

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 imagelarge 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.

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

Rules and recommendations
Component elementOptional elementRules
Component elementA: Background color options (all appearances) Optional element Rules
  • BLK_Black
  • BLK_White (with optional top & bottom border)
  • BLK_Neutral
  • BLK_Orange
  • BLK_Yellow
  • BLK_Pink
Component elementB: Video player Optional element Rules
  • 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)
Component elementb1: Player options Optional element  Rules
  • 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
Component elementC: Transcript Optional element Rules
  • 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
Component elementD: Headline Optional element  Rules
  • Character count: ~70*
  • Hard coded character limit
  • Available for both Standard and Pull quote appearances
Component elementE: Description / Pull quote Optional element Rules
  • 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)
Component elementF: Component CTA Optional element  Rules
  • CTA can be either a primary button or a tertiary link
  • Keep these "digital" friendly; i.e. short descriptors
Component element*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release Optional element Rules
Showing 1 to 8 of 8 entries