As designers and developers, we’re always looking for unique ways to build engagement with our website visitors. There are numerous ways to accomplish this like: using varied typefaces, appealing imagery, and captivating video. These visual ways of communicating your message help users digest your content in more enjoyable ways. Discussing both the strategies and tactics behind using video on HubSpot CMS, I'm going to show you how to implement unique video backgrounds on your website. 

Silent Looping Video: Rising Design Trend 

Keystone Health Partners, recently contracted with our team at Creatrix to rebuild their website on the HubSpot CMS. The Company works in the medical billing and collections space. One of their goals in the redesign was to increase the visual appeal and overall design aesthetics of their website. As our team thought through different design strategies and techniques, one of the items that we decided to implement was an embeddable silent video. This design tactic really helps to capture attention and add visual interest to an otherwise static website. Additionally, some of the biggest brands on the internet are starting to use infinite looping video for their websites such as Eastpak's sister site, and Billabong's, isurfbecause site. In addition to KeyStone Health Partners, other companies using the CMS, such as Great Harvest Bread Company, have implemented infinite looping videos. 

Keystone Health Partners feature their infinite looping video on their services page. 

It's an Easy Process 

The cool part about this tactic is that it’s easy to implement on your HubSpot CMS websites. Let’s first take a look at the modules that you’ll need set up to embed your video. To just embed a basic video on your site all that you’ll need is a “Custom HTML” module. So start by placing that module into in your page template.

The HTML

Once the Custom HTML module is placed into your template then you’re ready for the HTML code. The code snippet that you’ll need is below:

<div> <video muted=”muted”preload="yes" autoplay="autoplay" loop="loop" width="100%" height="">

 <source src="http://cdn2.hubspot.net/hub/178504/file-1741273142-mp4/Video/iStock_000023378570Big_Web.mp4">

</video>

</div>

Basically, this snippet of HTML code is placing the video into a div with a height property of 600px and a width of 100%. You can tailor these specifications for your own website. If you want the video to be taller or narrower just make alterations these two properties.

The video tag is doing the following things:

• Preloading the video
• Auto-playing it
• Muting it
• and putting it in an infinite loop

If any of these characteristics are things you don’t want for your website just remove them from the code.

Loading the Video File

Once you have the code in place you need to add the video url to the HTML code. To do that you must first add the video file to your HubSpot file manager. So drag drag in your .mp4 file or .mov file into the Hubspot file manager. Then click on the gear button to get the file URL. 

Once you have the file URL, place it in the HTML code after the src= (see bolded area below):

<div> <video muted=”muted”preload="yes" autoplay="autoplay" loop="loop" width="100%" height="">

 <source src="http://cdn2.hubspot.net/hub/178504/file-1741273142-mp4/Video/iStock_000023378570Big_Web.mp4">

Once you have done that just update your site page or landing page and you will have embedded video onto your HubSpot site page.

Improve the Design of your Website 

This is an easy tactic that will help you increase the design aesthetics of your websites and landing pages. However, make sure that you use embeddable video to help create the best user experience for the visitors, prospects and customers that are coming to your website. Reach out via Twitter @JonPavoni or leave a comment below to let me know if you have any difficulty in implementing it for your customers! Happy HubSpotting! 

Interested, but don't have a stock video resource? Check out this post for free stock video loop resources with tips on selecting a stock video background that will engage site visitors.

After you try this out, check out everything else you can achieve on the HubSpot CMS with our HubSpot tutorials.