Add videos to your calls-to-action (CTAs)

When creating a call-to-action (CTA), add videos to attract and engage website visitors. You can add videos directly in HubSpot or use videos from external sources such as YouTube.

If you are using a video uploaded to the HubSpot files tool, the advanced features option must be turned on. If not, the video will not appear as an option.

When analyzing your CTA performance, clicks on the video module, such as clicking the play button, will not add to the Click metric. Learn how to analyze your CTA's performance. 

To add a video when creating a CTA: 

• In your HubSpot account, navigate to Marketing > CTAs.
• In the top right, click Create.
• You can create a new CTA from scratch or from a template:
  • To create a new CTA from a template, in the left panel, click HubSpot Templates. Then, select a template that matches your goals. 
  • To create a new CTA from scratch, in the left panel, click Start from scratch. Then, select a CTA type:
    
    • Sticky Banner: a permanent banner fixed to the top or bottom of your page. The banner will remain as visitors scroll through your page. 
    • Pop-up box: a pop-up box that appears on a set schedule. 
    • Slide-In: a banner that slides in from a corner of your website. The banner will remain as visitors scroll through your page. 
    • Embedded: a button you can use on your HubSpot content to drive prospective customers to specific pages.
• In the left panel, from the Add tab, click and drag the video module directly into the right panel of the editor. 
  
  

• To edit the video position, hover over the video module and click and drag it to a new position.
• To use a video from a URL, under Video type, click Embed. Then, click Embed URL and continue setting up your video: 
  
  • Video URL: enter the URL for the video.
  • Preview: review a preview of the video. 
  • Size: set the video to automatically adjust based on the CTA, or set a specific height and width. 
  • Maximum size: set the maximum size the video can scale to. Click the Maximum size dropdown menu and select an option:
    • Original size: the video will not scale to be larger than its original size.
    • Full width: the video will take up the full width of the device it's viewed on.
    • Custom: the video will not exceed a specific width and height set in the sidebar editor. Enter pixel values for its dimensions in the Maximum width and Maximum height boxes. 

• • Custom thumbnail: change the preview image for your video. You can upload a custom thumbnail, or select a custom thumbnail from your file manager. 
     

• To use a video's embed code, under Video type, click Embed. Then, click Embed Code and continue setting up your video: 
  
  • Embed code: paste the embed code for your video. The video element and other details such as size and thumbnail will be automatically rendered based on the embed code. 
  • Preview: review a preview of the added video. 
    
    

• To use a HubSpot video, under Video type, click HubSpot video. When doing so, the advanced features option for the video must be turned on.
  • You can upload a new video to your file manager or use an existing video:
    
    • To upload a new video, click Upload. Then, select a video file from the file picker. By default, new video files uploaded within the content editor will have advanced features turned on.
    • To use a video from the file manager, click Browse videos. Then, in the right panel, click the video that you'd like to insert. 
  • Maximum size: set the maximum size the video can scale to, click the Maximum size dropdown menu and select an option:
    • Original size: the video will not scale to be larger than its original size.
    • Full width: the video will take up the full width of the device it's viewed on.
    • Custom: the video will not exceed a specific width and height set in the sidebar editor. Enter pixel values for its dimensions in the Maximum width and Maximum height boxes. 
  • Video details: click Edit to further customize your video. In the right panel, you can enter a title text, description, and meta tags. This will help search engines understand your video's content.
  • Advanced options: select the checkbox next to each of the following options to turn the option on. 
    • Loop video: automatically loop the video. 
    • Mute by default: when the video is playing, set the audio to be muted by default. 
    • Autoplay: automatically start the video when the page is loaded. 

      When using this option, it is strongly recommended to select the Mute by default option to comply with browser restrictions. Generally, videos with sound will be muted or blocked from playing automatically. 

      • Google Chrome: autoplaying videos must be muted. Videos frequently visited by the viewer are permitted to autoplay with sound. Learn more about Google’s scoring system.
      • Safari: autoplaying videos must be muted. Viewers can choose to block or allow unmuted autoplay for specific domains on their setup. Learn more about managing autoplay videos in Safari.
      • Mozilla Firefox: autoplaying videos must be muted. Viewers can choose to block or allow unmuted autoplay for specific domains on their setup. Learn more about managing autoplay videos in Firefox.
    • Hide controls: hide video control options such as the progress bar, audio controls, and video settings. 
  • Style options: customize the play button. Enter a hex value or click the color picker and select a color. 
     

• After setting up your video, at the bottom, click Save & Apply. 
• To duplicate the video module, hover over the element and click the duplicateclone icon.
• To delete the element, hover over the element and click the deletetrash can icon. 
• Continue creating your CTA.