Landing Pages

Make your external embedded video responsive

Last updated: February 9, 2021

Applies to:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

To make your embedded video responsive, customize the video's default size using the styling tools in the content editor. If you're comfortable working with HTML, you can customize your embedded video with custom code.

Make your embedded video responsive

  • In your HubSpot account, navigate to website pages, landing pages, or blog posts.
  • Click the name of the blog post or page that contains your embedded video.
  • In the content editor, click the video you've embedded, then in the rich text toolbar at the top, click the Full width icon fullWidth.

select-full-width-icon

Your video will now take up the full width of any device used to view your content. Keep in mind that the full width option is only available for certain types of embeds: 

  • Any embeds with a  <script> tag will not have full-width support because those embeds generate dynamic content. 
  • HubSpot can support full-width functionality for most other embeds, and if not you can edit the embed code to get desired level of responsiveness. 

Customize the styling of your embedded video with code

Please note: only use this method if you're comfortable working with HTML.

To customize the styling applied to your embedded video:

  • In your HubSpot account, navigate to website pages, landing pages, or blog posts.
  • Click the name of the blog post or page that contains your embedded video.
  • In the content editor, click the video you've embedded, then click the pencil icon edit.
  • In the Edit Embed popover, edit the source code of your embedded video.

edit-embed-code-popover-1

  • Click Apply.