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
2. Paste the code into an embed field in your blog.
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.
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:
<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. 👏
Additional resources
As a Hubspot user, you might appreciate these additional resources: