Skip to main content

Official website

of the Commonwealth of Pennsylvania

    The .gov means it's official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "PA.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Video Player

    The video player component provides a tool to embed and display videos on a webpage.

    Overview

    You can use the video player component to embed and play video on a webpaeg. A video can provide supplemental information on a page. The videos themselves are usually hosted through YouTube or Vimeo.

    Screenshot of a video player on a webpage. The component contains an image of Secretary of State Al Schmidt speaking to someone off camera. There is a play button superimposed over the image. There is also text beneath the image that says: "How Automatic Voter Registration Makes Pennsylvania's Elections More Secure. How does Automatic Voter Registration make our elections more secure? Secretary Schmidt explains how AVR will enhance the security of our elections by further improving the accuracy of voter information."

    Aspect ratio

    The video player can be configured for many ratios. The most common aspect ratios are 16:9 and 4:3. The video player should adopt the ratio of the embedded video.

    Modifiers

    Title

    You can add a title to the video player component. This will replace the native video title. This title should be styled as Headline/Small/Bold.

    An example of a video player component with a custom title and description.

    Description

    You can include a description beneath the video player and title to provide more context. This description should be styled as Body/Small/Regular.

    An example of a video player component with a custom description, but no title.

    Transcript link

    You can include an optional link that points to the transcript for the video.

    An example of a video player component with a custom title, description, and transcript link.

    Border

    You can add a 1px inside border to the video to frame the images. This can be useful when the webpage and the video have similar background colors. Use outline-variant for the video player color.

    An example of a video player component with a border around the video.

    Border radius

    You can add a 32px border radius as a visual element.

    An example of a video player component with a border radius of 32px around the video.