> ## Documentation Index
> Fetch the complete documentation index at: https://help.sendspark.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Embed a Video on a Hubspot Blog Post

> Learn how to embed responsive videos on HubSpot blog posts by manually setting dimensions and removing auto-crop formatting issues.

To embed a responsive video on a HubSpot blog post, copy the embed code from Sendspark's share modal, paste it into an embed field in your blog, then open the blog editor's advanced source code, remove the wrapping `<div></div>` around the iframe, manually set the iframe's height and width to your video's ratio, and remove the position, left, and top attributes. Setting 100% width will not work.

## Key takeaways

* HubSpot automatically forces embedded videos to a 16x9 ratio, which can cause an unwanted crop or scroll effect, so you must set the video dimensions manually.
* 100% width will not work; enter the actual height and width in the iframe using your video's ratio (9x16 for vertical, 4x3 for MacBook recordings, 16x9 for standard).
* In the blog editor, use advanced then source code to remove the wrapping `<div></div>` and the position, left, and top attributes from the iframe.

When you embed a video on Hubspot, it automatically forces the video to a 16x9 ratio. This can cause an unfortunate crop or scroll effect on your video.

To embed a responsive video on your Hubspot blog, you have to manually set the video height and width yourself.

100% width will not work!

## Here's how to make your video display correctly on Hubspot

1. Copy the video embed code from the share modal **Copy Code Snippet**

<img src="https://mintcdn.com/sendspark/5aCWm16oL46p87DB/images/3703840/fb2be1ae-image.png?fit=max&auto=format&n=5aCWm16oL46p87DB&q=85&s=dbeca0ef43b40a6906fbc313aa3c4163" alt="Embed tab on share modal" width="490" height="366" data-path="images/3703840/fb2be1ae-image.png" />

2. Paste the code into an embed field in your blog.

<img src="https://mintcdn.com/sendspark/5aCWm16oL46p87DB/images/3703840/3a7fc240-image.png?fit=max&auto=format&n=5aCWm16oL46p87DB&q=85&s=aff8c89d99904c38556108b2664fd3bb" alt="Hubspot Embed option" width="1670" height="458" data-path="images/3703840/3a7fc240-image.png" />

3. If you preview now, you'll notice that your video is forced to a 16x9 ratio, no matter what the actual video size is. Not pretty! 😬

4. Go back to your blog editor, and click **advanced** and then click **source code.**

<img src="https://mintcdn.com/sendspark/5aCWm16oL46p87DB/images/3703840/7d9fce22-image.png?fit=max&auto=format&n=5aCWm16oL46p87DB&q=85&s=6aef41721069552097dc42d548c29f13" alt="Advanced Hubspot" width="1636" height="372" data-path="images/3703840/7d9fce22-image.png" />

5. Remove the\*\*\<div>\</div\*\*> around your video iframe

6. Manually set the **height** and **width** of your video within the iframe to the correct size of your video. Here are some common ratios for video: vertical videos: 9x16, videos recorded from macbooks: 4x3, "normal" videos: 16x9.

7. Remove the **position**, **left**, and **top** attributes. Your code should look something like this:

```html theme={null}
<p>...</p><iframe style="border-radius: 6px; margin: 0px auto; display: block;" xml="lang" src="https://app.sendspark.com/embed/0rq5z0pi6or4lvwuuqxbhwfl2b3qwdnp" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe><p>...</p>
```

7. That's it! Your responsive video should be displaying beautifully on your blog. 👏

## Frequently asked questions

<AccordionGroup>
  <Accordion title="Why does my HubSpot video look cropped or squished?">
    HubSpot automatically forces embedded videos to a 16x9 ratio no matter the actual video size, which can cause an unfortunate crop or scroll effect. To fix it, manually set the video's height and width in the iframe source code.
  </Accordion>

  <Accordion title="Can I just set the video width to 100% in HubSpot?">
    No. 100% width will not work for embedding a responsive video on a HubSpot blog. You have to manually set the video height and width yourself.
  </Accordion>

  <Accordion title="What height and width should I use for my video?">
    Set the iframe dimensions to match your video's ratio. Common ratios are 9x16 for vertical videos, 4x3 for videos recorded from MacBooks, and 16x9 for "normal" videos.
  </Accordion>

  <Accordion title="Where do I edit the video's source code in HubSpot?">
    In your blog editor, click advanced and then source code. From there, remove the wrapping `<div></div>` around your video iframe and remove the position, left, and top attributes.
  </Accordion>
</AccordionGroup>

## Additional resources

As a Hubspot user, you might appreciate these additional resources:

1. [How to send hyper-personalized videos in Hubspot Marketing Hub emails](/how-to-set-up-sendspark-for-hubspot-crm-integration)
2. [How to send hyper-personalized videos in Hubspot Sales Hub emails](/hubspot-static-videos-sales-hub)
3. [How to connect the Hubspot CRM](/how-to-set-up-sendspark-for-hubspot-crm-integration)

*Updated July 2026.*