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
- 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.
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.
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 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.
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.
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.
Rules and recommendations
| Component element | Optional element | Rules | ||
|---|---|---|---|---|
| A: Background color options (all appearances) |
|
|||
| B: Video player |
|
|||
| b1: Player options |
|
|||
| C: Transcript |
|
|||
| D: Headline |
|
|||
| E: Description / Pull quote |
|
|||
| F: Component CTA |
|
|||
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release | ||||
Key points appearance
Use this appearance to highlight a few important points pulled from the video. This option works well if there are points or implications that might help draw the user in to the video.
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.
We’ve baked many features into this component, including the ability to:
- Add either a large (H2) or medium sized (H3) headline with intro blurb
- Highlight up to 4 key points with optional hyperlinks
- Left or right orientation video orientation
- It is an exact mirror of our Image & Data vis “key points” appearances, so if your content needs require both an image/data viz with a video component, this would be a good match
PRO TIP: Use the large headline appearance if you are using this to introducing a new content section to your page; think of it as your H2. If this is used as support for an established section, use the “medium” size headline (H3).
Growth of the strategy
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.
Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.
Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.
Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.
Rules and recommendations
| Component element | Optional element | Rules | ||
|---|---|---|---|---|
| A: Background color options |
|
|||
| B: Video player |
|
|||
| b1: Player options |
|
|||
| C: Transcript | ||||
| D: Headline |
|
|||
| E: Key point bullets |
|
|||
| F: Component CTA |
|
|||
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release | ||||
Alternate variations
All of our components have the ability to stack vertically as many times as your needs require, and include different background appearances. To help you visualize possible layouts, we stacked a few Image components together to give you a more clear understanding of how this could look.
Growth of the strategy
Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.
Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance. These bullet points will max out at 200 characters.
Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance. These bullet points will max out at 200 characters.
Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance. These bullet points will max out at 200 characters.
Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance. These bullet points will max out at 200 characters.
Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.
Global trade frictions have intensified this summer. This reinforces a key plank of our outlook but may challenge our moderately pro-risk stance.
Risk assets rebounded last week after selling off amid trade worries. U.S. consumer data were mixed, and the risk of a no-deal Brexit rose.
U.S. consumers have supported U.S. growth as manufacturing slumps. Jobs data this week will provide evidence on whether this trend persists.
Side by side - Offset & Pull quote - offset appearances
Our new “Offset” appearance was created to help alleviate the heavy striping/banding that occurs with our high contrast color palette & full-bleed backgrounds.
The background color is inset (it does not extend to the edge of the browser), and the video player “overlaps” outside the component background, allowing for content to better drive users down the page along the journey and bring the page to life, while allowing more room to breath.
We believe that by doing this, it helps provide more visual interest and a richer experience, while solving the strong visual banding issue
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.
This optional headline has 70 characters max
350 characters max. 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 are entrusted to manage the pension of millions of people in the UK. This responsibility drives us every day to deliver the very best outcomes we can for our clients.
We are entrusted to manage the pension of millions of people in the UK. This responsibility drives us every day to deliver the very best outcomes we can for our clients.
Rules and recommendations
| Component element | Optional element | Rules | ||
|---|---|---|---|---|
| A: Background color options (all appearances) |
|
|||
| B: Video player |
|
|||
| b1: Player options |
|
|||
| C: Transcript | ||||
| D: Headline |
|
|||
| E: Description / Pull quote |
|
|||
| F: Component CTA |
|
|||
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release | ||||
Alternate variations
All of our components have the ability to stack vertically as many times as your needs require, and include different background appearances. To help you visualize possible layouts, we stacked a few Image components together to give you a more clear understanding of how this could look.
We help our clients, and the people they serve, save for retirement, pay for their children’s educations, buy homes and start businesses. Throughout our history, we have continued to find new ways to contribute to a more equitable, resilient future for everyone.
We help our clients, and the people they serve, save for retirement, pay for their children’s educations, buy homes and start businesses. Throughout our history, we have continued to find new ways to contribute to a more equitable, resilient future for everyone.
We are entrusted to manage the pension of millions of people in the UK. This responsibility drives us every day to deliver the very best outcomes we can for our clients.
We are entrusted to manage the pension of millions of people in the UK. This responsibility drives us every day to deliver the very best outcomes we can for our clients.
Paragraph appearance
Our paragraph appearance aligns to our paragraph, so it tucks nicely inside your content block. It’s fully responsive and will automatically scale according to device. Use this appearance when you are discussing an in-depth topic and don’t want to interrupt the page flow by inserting a full-bleed appearance.
We’ve baked many features into this component, including the ability to:
- Add either an optional large (H2) or medium (H3) headline with intro blurb
- Add a video playlist directly next to the video for easy viewing
- Make your video stand out with 3 background color options
PRO TIP: Use the large headline appearance if you are using this to introducing a new content section to your page; think of it as your H2. If this is used as support for an established section, use the “medium” size headline (H3). Or you can just add the video player with or without the playlist directly below a paragraph for a seamless transition.
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.
Player with playlist option
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.
Rules and recommendations
| Component element | Optional element | Rules | ||
|---|---|---|---|---|
| A: Background color options |
|
|||
| B: Headline |
|
|||
| C: Description |
|
|||
| D: Video player |
|
|||
| d1: Player options |
|
|||
| E: Transcript | ||||
| F: Playlist |
|
|||
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release | ||||
Alternate variation example
All of our components have the ability to stack vertically as many times as your needs require, and include different background appearances, like this black appearance.