Spotify embed cut on mobile

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: 

On a computer screen it looks like this: 

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

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: 

On a computer screen it looks like this: 

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

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! 

@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? 

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

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. 

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

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!