Payroc Design logo
  • Our brand
    Mission statement Personality Values Assets
  • Content guidelines
    Voice and tone Grammar and formatting Inclusive language Writing style guides
  • Design system
    Get started Essentials Components Patterns
Submit a design request
  1. Payroc design
  2. Design system
  3. Components
  4. Video

Video

Videos are a fast and convenient way to keep users interested and on your site for longer.

Example

Coded example

Code snippet

HTML JavaScript
								
<div class="embed-responsive embed-responsive-16by9">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/b2-YHiFNFFo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
          
							
								
  None required
          
							

Figma prototype

Usage guide

Dos and don'ts

Use a good thumbnail still.

It fits the right aspect ratio.

To be less than a minute.

Low quality footage.

Unbranded content.

Animations that do not match the brand.

Payroc Design logo

Copyright © Payroc

    Our brand
  • Mission statement
  • Personality
  • Values
  • Assets
  • Brand Guide for Sales Partners
    Content guidelines
  • Voice and tone
  • Grammar and formatting
  • Inclusive lanugage
  • Writing style guides
    Design system
  • Get started
  • Essentials
  • Components
  • Patterns