Jump to content

Spotify embed cut on mobile

Recommended Posts

4 hours ago, CalvinEK said:

Site URL: https://www.calvin.no/en-slags-grind/hunden

I have embedded a Spotify player on this page: https://www.calvin.no/en-slags-grind/hunden 

When viewed on a mobile device (or in the mobile preview in Squarespace) the bottom part of the player is cut, like this: 

IMG_9977.thumb.jpg.ba99120e1ad43b2b4d243b0893c8aa70.jpg

On a computer screen it looks like this: 

pc.thumb.png.565bb66f84f2e3480b14097e3625a77f.png

Is there a way that I can make the whole player show on mobile? 

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1637351429136_2825 .embed-block-wrapper iframe {
    height: unset;
  }

  #block-yui_3_17_2_1_1637351524693_2665 {
    margin-top: 30px;
  }
}

Let me know how it works on you site

Press 👍 or mark this answer as solution to help another one too

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
17 minutes ago, bangank36 said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1637351429136_2825 .embed-block-wrapper iframe {
    height: unset;
  }

  #block-yui_3_17_2_1_1637351524693_2665 {
    margin-top: 30px;
  }
}

Let me know how it works on you site

Press 👍 or mark this answer as solution to help another one too

It works beautifully! Thank you very much! 

Link to comment
1 hour ago, CalvinEK said:

@bangank36 I just published a new blog post with an embedded Spotify player playing a different track. The fix you provided works on the original blog post, but not on the new one: https://www.calvin.no/en-slags-grind/aronsen 

Any idea how I can make it work every time I embed a Spotify player? 

Hi,

I find that your block id has been changed. Kindly replace my previous code with the following one on your Custom Css

@media only screen and (max-width: 767px) {
  /*change your id to apply change*/
	#block-yui_3_17_2_1_1637960750049_2648 {
		.embed-block-wrapper {
			iframe {
				height: unset;
			}
		}
		+ {
			div {
				margin-top: 30px;
			}
		}
	}
}

If you get this issue again, you can find the id and replace it on your own by using the extension: Squarespace ID Finder

Here is how to use it: https://recordit.co/kUIH4uco0b

Hope it can help you

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
9 hours ago, bangank36 said:

Hi,

I find that your block id has been changed. Kindly replace my previous code with the following one on your Custom Css

@media only screen and (max-width: 767px) {
  /*change your id to apply change*/
	#block-yui_3_17_2_1_1637960750049_2648 {
		.embed-block-wrapper {
			iframe {
				height: unset;
			}
		}
		+ {
			div {
				margin-top: 30px;
			}
		}
	}
}

If you get this issue again, you can find the id and replace it on your own by using the extension: Squarespace ID Finder

Here is how to use it: https://recordit.co/kUIH4uco0b

Hope it can help you

Thank you again.

When I add this code, Squarespace says "Syntax Error on line 52" (the line with "         + { "). So I didn't save it and don't know what would happen if I did. 

Thank you for the link to the plugin and the instruction video. 

I looked at the first blog and second blog post:

https://www.calvin.no/en-slags-grind/hunden

https://www.calvin.no/en-slags-grind/aronsen

and found that their respective embedded Spotify players have different block ids.

So if I replace the old block id with the new, the fix will (apparently) only work on the second blog post. And it will reoccur on the first blog post.

Will I have to add more custom CSS every time I add embed a Spotify player in a blog post? Like this: 

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1637960750049_2648 .embed-block-wrapper iframe {
    height: unset;
  }

  #block-08104326c4a328c45446 {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1637351429136_2825 .embed-block-wrapper iframe {
    height: unset;
  }

  #block-yui_3_17_2_1_1637351524693_2665 {
    margin-top: 30px;
  }
}

It seems to solve the problem. But it is laborious. 

Link to comment
26 minutes ago, CalvinEK said:

Thank you again.

When I add this code, Squarespace says "Syntax Error on line 52" (the line with "         + { "). So I didn't save it and don't know what would happen if I did. 

Thank you for the link to the plugin and the instruction video. 

I looked at the first blog and second blog post:

https://www.calvin.no/en-slags-grind/hunden

https://www.calvin.no/en-slags-grind/aronsen

and found that their respective embedded Spotify players have different block ids.

So if I replace the old block id with the new, the fix will (apparently) only work on the second blog post. And it will reoccur on the first blog post.

Will I have to add more custom CSS every time I add embed a Spotify player in a blog post? Like this: 

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1637960750049_2648 .embed-block-wrapper iframe {
    height: unset;
  }

  #block-08104326c4a328c45446 {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1637351429136_2825 .embed-block-wrapper iframe {
    height: unset;
  }

  #block-yui_3_17_2_1_1637351524693_2665 {
    margin-top: 30px;
  }
}

It seems to solve the problem. But it is laborious. 

It seems that we need to set style in general, not specific element. Kindly remove all my previous codes and add the following one

@media only screen and (max-width: 767px) {
  .embed-block .embed-block-wrapper.embed-block-provider-Spotify > iframe {
    height: unset !important;
  }

  .embed-block + div {
    margin-top: 20px !important;
  }
}

Let me know how my new codes work on your site

Hope it helps you

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
7 hours ago, bangank36 said:

It seems that we need to set style in general, not specific element. Kindly remove all my previous codes and add the following one

@media only screen and (max-width: 767px) {
  .embed-block .embed-block-wrapper.embed-block-provider-Spotify > iframe {
    height: unset !important;
  }

  .embed-block + div {
    margin-top: 20px !important;
  }
}

Let me know how my new codes work on your site

Hope it helps you

Yes, this works. Thank you very much @bangank36!  

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.