Big blank area under each Spotify-embed
-
The page linked is just for testing, I just grabbed some template but it seems to look the same regardless of template, I tested several.
I used the predifined Spotify-block to embed album links but they all get this large unused area below. Alternatively if I untick the “Resize for smaller devices” I get a larger Spotify-block as shown in the second embed, but I don’t want that. I want the smaller size but with no unneccesary spacing. On my iPhone this bigger version is even bigger relative to the other ones.
I found a four year old post about this but no solution there. Maybe there isn’t one? Seems a bit strange though since its such an obvious malfunction.
I also tried iFrames (from Spotify>Share) in a HTML-blocks. Looked nice in the WordPress editor but but seems like it’s not supported anymore, all iFrame code is automatically removed so I can’t go online with these changes.
Is there a solution for the non expert or is just the way it is?
The blog I need help with is: (visible only to logged in users)
-
Addition: The system removed my specific link, here it is.
https://sptfcollection.wordpress.com/2024/02/14/fjarde-inlagget/ -
all iFrame code is automatically removed
Hi there, iframes can only be used from the Creator plan and up. With any lower plan the iframe is stripped out for security reasons. More on that here.
I spent some time tinkering with this and the only way I could get the Spotify embeds to move closer together vertically was by doing this:
- Open the List View in the Post/Page Editor and highlight all the Spotify embeds and make them a Group block.
- Next, in the Block Settings in the Editor’s right sidebar, you’ll see a section called “Layout” with a toggle that says “Inner blocks use content width”. Flip the toggle button and under “Content” enter 30 REM <-make sure the box says REM by clicking the symbol next to PX and choosing REM from the drop down list. (When you choose REM it’s more mobile friendly). Height and center Justification should be automatically set for you.
Click to expand It won’t look much better in the Editor itself, but here’s what the embeds looked like for me after doing the above:
Web in Firefox latest:
Click to expand Mobile (Galaxy S20 emulator on Firefox)
Click to expand You might want to play with the REM number depending on theme. Nook is active on my test site at the moment.
Hope that helps, but post back here if you have more questions.
-
-
Thanks, I tried this and maybe a bit better but it’s a bit like when unticking “Resize for smaller devices”, the relative height gets bigger but the distance between items vertically is about the same. But hey, I got some great advice on grouping and resizing so thank you very much!
Any idea why this is happening and why it seems impossible to resolve? Just curious why such an obvious flaw when linking to a big service can’t be corrected.
-
Hi again, you’re welcome. As far as a reasons, after reading a number of other forum threads tagged with Spotify, is that where the embed URL itself was copied from on Spotify might be the issue. However, I didn’t have a chance to test this further. I also don’t have any special insights why this is occurring or why WordPress.com doesn’t correct it.
Right now, to me, the embeds look to be evenly spaced vertically now, at least in a web browser. It also looks like you changed themes from Spiel to Disco and I based my testing on your previous theme which included a sidebar. So you might want to play with that REM number a bit between the Content and Width settings.
On mobile, I’m still getting odd vertical spacing with “Nina” being the largest vertically. This is what I see in the emulator now (again, GalaxyS20).
-
I’m also going to ping forum Staff because of another issue.
Hi folks, when viewing this guide https://wordpress.com/support/wordpress-editor/blocks/embed-block/ and go to the Audio section, there is a link there to a separate Spotify guide but the link circles back to the same embed block guide.
I did find a guide on Spotify at https://wordpress.com/support/audio/#embed-from-spotify but the link “Visit our Spotify guide for more” links back to itself. It’s a bit confusing.
Thanks.
-
Hi @sptfcollection after a closer look, this appears to be an issue with the embed block, possibly related to a change in how the embed code is constructed at Spotify. Our team is taking a closer look, but I don’t have an ETA on when it might be fixed. Happy to update you as soon as we know more but for now you may wish to turn off the ‘Resize for smaller devices’ option. This will show the larger embed which I understand is not preferred for you, but will have a standard bottom margin that is less awkward overall.
Thanks!
-
Thanks for the insights @staff-totoro I wanted to also draw Staff attention to the documentation issue I mentioned just above.
-
Hey @justjennifer,
Thanks for the heads up. It looks like we originally used a separate page for Spotify embeds and then consolidated the documents, which causes the link to redirect back to the same page. I updated the link to point to our Audio embed document, as you recommended, which provides a little more information for Spotify embeds. Thanks!
-
Hi @staff-dragon Thank you for that. Maybe the link text
Visit our Spotify guide for more.
at https://wordpress.com/support/audio/#embed-from-spotify should instead read “Visit our guide to Embeds for more”? :)
-
@justjennifer I updated to Visit our Embeds Block guide for more, and also updated the URL to eleminate the redirect and send clicks directly to https://wordpress.com/support/wordpress-editor/blocks/embed-block/
Thanks for your suggestions!
- The topic ‘Big blank area under each Spotify-embed’ is closed to new replies.
WordPress.com Forums 