Spotify embedded in post problem « Support Forum | Kriesi.at

Support Forum » Eunoia

Spotify embedded in post problem

9 posts from 4 voices

Started 3 months ago by mudskippir
Latest reply from Devin
This topic is closed
This topic is resolved

Tags:

mudskippir
Member

Hi,

I am using the Eunoia theme. I am attempting to make a blog post that I am embedding a playlist from Spotify into.

Here is the page:
http://www.theybklyn.com/2013/02/jan2013music/
pw: spotify

Here is the embed code I am using:
<iframe src="https://embed.spotify.com/?uri=spotify:user:mudskippir:playlist:6DyxOsAbolEybOXjUMyg8i" height="380" width="250" frameborder="0"></iframe>

There are TWO issues, the first being that I can't resize the player. It will always default to the full width of the blog, as you can see in the example link above. I tried using the shortcode/column solution as seen here: http://www.kriesi.at/support/topic/incarnation-theme-style-overwriting-my-page-code#post-93959

That worked to make my player fit inside half of the blog, but height of the player was way less in pixels and I was unable to adjust it even from the embed code.

The second issue is the white space below the top part of the player that closes up when you roll over the player. I've posted the same embed code on another blog I have and the player embeds without the dreaded white space opening and closing.

Help, please!

Posted 3 months ago #
Dude
Dude
Probably Kriesi's iframe fix "adjusts" the spotify iframe dimensions. You can try to remove the fix - open up js/avia.js and replace following code:
```
avia_small_fixes(container);
```
with:
```
//avia_small_fixes(container);
```
Posted 3 months ago #
mudskippir
Member

Hi Dude,

I replaced the code like you suggested and it doesn't work. :(

Take a look:
http://www.theybklyn.com/2013/02/jan2013music/
pw: spotify

It seems like it did format it to the default width, but the height is still being overridden by something. Here is the only coding in the text section of the post:
<iframe style="font-size: 13px; line-height: 19px;" src="https://embed.spotify.com/?uri=spotify:user:mudskippir:playlist:6DyxOsAbolEybOXjUMyg8i" height="600" width="250" frameborder="0"></iframe>

I went to change the height to 400 and all it did was remove the white space you see under it in it's current state.

The weird white space that closes up when you rollover the player is also still there.

Any other suggestions?

Thanks,
Christy

Posted 3 months ago #
Ismael
Moderator
Hi,

I thought what Dude said will already fix the issue but try to add this on your custom.css.
```
#mainContainer {
min-height: 400px !important;
}

.postid-1529 iframe {
min-height: 550px !important;
}

.jspContainer {
min-height: 600px !important;
}
```
I hope this will adjust the height. Actually, try to do what Dude posted earlier then remove browser history.cache then reload the page.

Regards,
Ismael
Posted 3 months ago #
mudskippir
Member

Hi Ismael,

I added this to the CSS style sheet and emptied my browser history and cache from the earliest possible point. The embed still looks funky and the embed doesn't reflect any size changes or directions.

I hope this isn't a lost cause as this is a really integral part of our website and we want to be embedding this player once a month.

Thanks for your help,
Christy

Posted 3 months ago #
Devin
Moderator

Hey Christy,

I think the actual spotify code has something to do with it. If you open your embed url alone and adjust the window to various sizes it seems to limit the height in some cases and let it expand full height+width in others.

I made a test page with just the spotify iframe and it wont let you change the height if the height+width is to far in proportion. It may just be something you have to tweak and get to a tolerable size.

For example, I used 780px height and 500px width which limited the height to 580px. If I bumped up the width to 550px it expanded the height to 549px (of the actual player inside the iframe) while the iframe itself was what I set originally (780px).

I'll keep my test live for you here so you can see what I mean:
removed

Regards,

Devin

Posted 3 months ago #
mudskippir
Member

Hi Devin,

On my other blog site that I tested the embed code in, it looks the way yours looks, which is totally fine. Unfortunately, the way it looks in the blog post in this thread is not only limited in the ability to size/resize, but it also has that white space that closes up on rollover. Can you tell me why that is happening?

It isn't happening on your page that you linked to and it doesn't happen on my other blog, here: http://www.christypessagno.com/blog/?p=385 pw: spotify

If I could at least get this rollover fixed, I'll be happy.

Thanks,
Christy

Posted 3 months ago #
mudskippir
Member

Ignore me, just tried another computer. This will do!

Thank you guys for your help!

Posted 3 months ago #
Devin
Moderator

Glad we could help :)

Let us know if you have any other questions or issues.

Regards,

Devin

Posted 3 months ago #