# Design Question: Embedded content showing up differently

**URL:** <https://community.hubspot.com/t/design-question-embedded-content-showing-up-differently/16475>\
**Category:** Blog, Website & Page Publishing\
**Tags:** content\
**Created:** [September 29, 2019, 6:47pm UTC](https://community.hubspot.com/t/design-question-embedded-content-showing-up-differently/16475 "2019-09-29T18:47:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MiaPV](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miapv/32/54847_2.png) [@MiaPV](https://community.hubspot.com/u/MiaPV)\
**Post date:** [September 29, 2019, 6:47pm UTC](https://community.hubspot.com/t/design-question-embedded-content-showing-up-differently/16475/1 "2019-09-29T18:47:31Z")

</div>

We have had A LOT of bizarre things happen with our site design (the font weight suddenly changed without anyone touching the css??) sometimes embedded objects will show up correctly and sometimes they will show up differently, even while using the exact same embed code.

Can anyone tell me why some blog posts (using the same template) allow the embed code to display properly:

\<iframe style=“margin: 0px auto; display: block;” allow=“autoplay” xml=“lang” src=“[https://player.pippa.io/5ac0f9c42df344f54cb153d1/episodes/cats-peeing-outside-the-litter-box-causes-prevention?theme=default&cover=1&latest=1](https://player.pippa.io/5ac0f9c42df344f54cb153d1/episodes/cats-peeing-outside-the-litter-box-causes-prevention?theme=default&cover=1&latest=1)” width=“100%” height=“110px” frameborder=“0”\>\</iframe\>

[

]([Cat Can't Pee! What to Do If Your Cat Has a Urinary Obstruction.](https://www.preventivevet.com/pawsandplay/why-is-my-cat-spraying-or-peeing-outside-the-litter-box))

And others it seems like no matter what I do, it somehow changes the code and forces lots of extra space at the bottom of the player?

[

]([https://www.preventivevet.com/cats/how-to-clean-cat-\*\*bleep\*\*-and-poop-accidents](https://www.preventivevet.com/cats/how-to-clean-cat- **bleep** -and-poop-accidents))

Thanks in advance!

Mia

---

<div class="post-metadata">

**Author:** ![joceyng](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/joceyng/32/84335_2.png) [@joceyng](https://community.hubspot.com/u/joceyng)\
**Post date:** [September 30, 2019, 3:03am UTC](https://community.hubspot.com/t/design-question-embedded-content-showing-up-differently/16475/2 "2019-09-30T03:03:23Z")

</div>

Hey MiaPV 🙂

Thanks for providing screenshots of your blog articles, with the URL visible in the address bar. Looking at the souce code of your blog article ([How to Clean Cat \*\*bleep\*\* and Poop Accidents](https://www.preventivevet.com/cats/how-to-clean-cat- **bleep** -and-poop-accidents)), the \<iframe\> code currently in use on the page has height and width parameters that are adding white space below the player.  
\<iframe style=“margin: 0px auto; display: block;” allow=“autoplay” xml=“lang” src=“[https://player.pippa.io/5ac0f9c42df344f54cb153d1/episodes/cats-peeing-outside-the-litter-box-causes-prevention?theme=default&cover=1&latest=1](https://player.pippa.io/5ac0f9c42df344f54cb153d1/episodes/cats-peeing-outside-the-litter-box-causes-prevention?theme=default&cover=1&latest=1)” **width=“560” height=“315”** frameborder=“0” data-service=“player.pippa”\>\</iframe\>

 ![iframe code with width and height parameters.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/2/329991d88ba1e3a388b132aee59e27bed2df42fd.png)  
current code

Try changing this to width=“100%” height=“auto” for your embedded player to look like this!

 ![proposed changes to iframe width and height.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/e/e3de49748d281fc40550b6130a4f80aaaafead34.png)  
proposed changes  
Let me know if you have any questions 🙂  
Jocelyn

---

<div class="post-metadata">

**Author:** ![MiaPV](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miapv/32/54847_2.png) [@MiaPV](https://community.hubspot.com/u/MiaPV)\
**Post date:** [September 30, 2019, 7:56pm UTC](https://community.hubspot.com/t/design-question-embedded-content-showing-up-differently/16475/3 "2019-09-30T19:56:42Z")

</div>

Thanks for the response @joceyng - the problem is, I have been doing exactly what you said, but for some reason the editor won’t save the code the same way that I put it in. The screen shots below will show you exactly what is happening. I am adding the code, clicking save, and then it still shows up weirdly. When I go back into the editor, it has assigned a width and height that adds space.

 ![Screen Shot 2019-09-30 at 12.52.01 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/1X/9fc43d0ee693b2860e4bab0a1bcf2d4cdc2c0442.png)

 ![Screen Shot 2019-09-30 at 12.52.36 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/9/3959cd62d4d118f6c0aca24bfcb80354f0c002a5.png)

---

<div class="post-metadata">

**Author:** ![joceyng](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/joceyng/32/84335_2.png) [@joceyng](https://community.hubspot.com/u/joceyng)\
**Post date:** [October 1, 2019, 9:11am UTC](https://community.hubspot.com/t/design-question-embedded-content-showing-up-differently/16475/4 "2019-10-01T09:11:18Z")

</div>

Hey @MiaPV , thanks for the response!

I tested this out on my end and it looks like the iframe code does not accept the use of “auto” for the width parameter. I changed this out to **width=“560” height=“110”** instead and that seems to have fixed the height issue. Check out the changes on this preview link: [https://www.preventivevet.com/?hs\_preview=jsyJcTEi-5443951703](https://www.preventivevet.com/?hs_preview=jsyJcTEi-5443951703)

Here is the code snippet in full, for reference

\<iframe style=“margin: 0px auto; display: block;” allow=“autoplay” xml=“lang” src=“[https://player.pippa.io/5ac0f9c42df344f54cb153d1/episodes/cats-peeing-outside-the-litter-box-causes-prevention?theme=default&cover=1&latest=1](https://player.pippa.io/5ac0f9c42df344f54cb153d1/episodes/cats-peeing-outside-the-litter-box-causes-prevention?theme=default&cover=1&latest=1)” width=“560” height=“110” frameborder=“0” data-service=“player.pippa”\>\</iframe\>

Cheers,

Jocelyn

---

<div class="post-metadata">

**Author:** ![MiaPV](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miapv/32/54847_2.png) [@MiaPV](https://community.hubspot.com/u/MiaPV)\
**Post date:** [October 1, 2019, 6:57pm UTC](https://community.hubspot.com/t/design-question-embedded-content-showing-up-differently/16475/5 "2019-10-01T18:57:23Z")

</div>

That worked (although I swear it wasn’t taking my code when I had tried setting the height previously)!! Thank you 🙂

---

<div class="post-metadata">

**Author:** ![Bronco76](https://avatars.discourse-cdn.com/v4/letter/b/dfb087/32.png) [@Bronco76](https://community.hubspot.com/u/Bronco76)\
**Post date:** [October 6, 2023, 3:45pm UTC](https://community.hubspot.com/t/design-question-embedded-content-showing-up-differently/16475/6 "2023-10-06T15:45:32Z")

</div>

I am using Insert Embed and tried all of these. This fixed it. When you insert embed code in hubspot it is setting the padding bottom to 56.25%. I change it to 96.25% and that fixed the sizing.