Marketing video

The Marketing video component 

Video backgrounds serve as supplementary elements on a webpage, aiding in the representation of products, services, or experiences. They function to complement rather than dominate the website's focal content, providing an immersive visual context while maintaining user engagement.

It's essential for video backgrounds to strike a balance between informative content and subtlety to prevent user distraction. Unlike feature-length films, these videos should be concise, delivering the intended message efficiently. Lengthy videos can lead to increased loading times, a problem for users.

They are not to be used on Calgary.ca, only on Marketing campaign pages.

Marketing video background considerations

Content should be relevant: We strongly advise that the video content should directly relate to the webpage's purpose, whether it's showcasing a product, service, or setting a specific mood or tone.

Videos are for support:  Video background is better when it supports other material rather than substitutes for it.

Focus on necessity: Video just for the sake of having video likely won’t communicate the right message on your site nor help your page. Make sure a video background is extremely necessary for your page before considering it.

Keep it simple: The action of background videos should be easy to understand, and you shouldn’t need too many words. Too much action or too quick of a pace, as well as a lot to read, can be confusing.

Usage best practices

Use marketing videos where demonstrating product features, explaining complex concepts, or educate users can be more effectively conveyed through visuals rather than text alone. It is important to note they make become the focus of your page and overshadow the rest of the content and information on your page.

It is crucial to consider that a video just for the sake of having video likely won’t communicate the right message on your site. Ensure that the content of the video is directly related to the theme or topic of your website.

Below are some examples an marketing video should be considered for:

  • Demonstrating a current and/or future vision or a product or service in detail.
  • Visualizing how something will look like once done, and its benefits.
  • Illustrating changes or improvements to a service or product.
  • Explaining complex services or procedures.
  • For those videos, we will need: transcript, closed caption, enough contrast for users to ready any text present on the video.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files

Functional grouping: Marketing and storytelling

Demo

Neque porro quisquam est qui dolorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed risus quis dui sollicitudin elementum. Aenean viverra magna sit amet gravida euismod. 

Check details

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    
    




    
    


    

  • Have a video poster for your video, so if the video fails to load or takes too long to do so, the poster will display instead of a blank space. This will also be the poster displayed on mobile devices.

  • Limit videos to 10 minutes. But remember, the shorter the video, the more likely for the users to watch the whole thing.

  • Limit your CTA to a maximum of 4 words.

  • Have a transcript available. They make the video accessible for visually impaired individuals and can be helpful for users with English as a second language to translate.

  • Have closed caption. They make the video accessible for hearing impaired individuals.

  • If you decide to have text on the video, make sure they have enough contrast between the background and the text color. Otherwise users will have a hard time following the content.

  • Have auto-play disabled. A video cannot autoplay with audio on, this is a WCAG violation. If we enable autoplay without audio, as it is an informative video, users will have to go back to the beginning of the video to get the full information, which means an extra effort for some users (eg.: less tech savvy and people with motor disability) to go back the video and it adds this extra step to users of having to rewind the video. Also, some users may not recognize that the video is muted and have difficulties to turn the volume on. For screen reader users, they cannot see it visually so it will be hard for them finding out if the video is informative and has sounds. They are also keyboard users. Even if they find out the video is muted, the process of rewind, unmute, play, stop will be challenging for them.



 



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    
    




    
    


    

  • Do not have excessive movement in your video, such as fast panning, shaky filming, or rapid change of frames. Those can make your video hard to follow and understand and provoke motion sickness in some users.

  • Do not have parts of the video flashing more than three times in any one-second period to prevent triggering seizures in individuals with photosensitive epilepsy.

  • Do not have drastic color contrasts in your video, this helps with distinction if there is any text on the video.

  • Avoid overcrowding the video with complex visuals that could overwhelm users.

  • Avoid using a marketing video on a page that already has a main background video or an inline background video. Only one video should exist per page to not overcrowd pages nor overwhelm users.

  • Do not use it for decoration only. Videos should be instructive to users and complement your content with something that will provide information. They must not be only for decoration, with no informational content behind it.

  • Do not use it for over-Promotion. While the goal of marketing videos is to promote your brand, products, or services, avoid making the video solely about promotion without providing valuable information or context