embed (Bandcamp) sizing issue

Hi there

I haven’t been able to reproduce this on a test site using the 2020 theme. Can you share the exact shortcode that you used? Did you add it using a shortcode block?

Yes – I used a shortcode block:

‘[bandcamp width=350 height=470 album=152909386 size=large bgcol=ffffff linkcol=0687f5 tracklist=false]’

I switched to the 2021 theme and it works as expected there.
I am using the ‘Options for Twentytwenty’ plug in (in the 2020 theme) to adjust the width of the content area from the default 58rem(580px) to 100rem(1000px) and that is what makes the player expand to that width. I tried doing the same with the 2021 theme (using the ‘Options for twentytwentyone’ plug-in) and it does not make the player change size. I don’t know how to get around this as I need the content to be wider than 580px and would prefer to use the 2020 theme. Also, even though I used the shortcode, the theme has somehow converted the player to the html iframe version (as if I did not choose the ‘wordpress.com’ option in the Bandcamp code embed popup). At this point, I am thinking this may be a theme issue but I just don’t know.

thank you for looking into this,

Yes – I used a shortcode block:

‘[bandcamp width=350 height=470 album=152909386 size=large bgcol=ffffff linkcol=0687f5 tracklist=false]’

I switched to the 2021 theme and it works as expected there.
I am using the ‘Options for Twentytwenty’ plug-in (in the 2020 theme) to adjust the width of the content area from the default 58rem(580px) to 100rem(1000px) and the player expands to the same width (1000px). I tried doing the same with the 2021 theme (using the ‘Options for twentytwentyone’ plug-in) and it does not make the player change size. I don’t know how to get around this as I need the content to be wider than 580px and would prefer to use the 2020 theme. Also, even though I used the shortcode, the theme has somehow converted the player to the html iframe version (as if I did not choose the ‘wordpress.com’ option in the Bandcamp code embed popup). At this point, I am thinking this may be a theme issue but I just don’t know.

thank you for looking into this,

Hi again

This CSS worked for me in testing:

iframe {width: auto !important;}

Can you try adding that via the Customizer and see if it helps?

I tried it out and it succeeded in reducing the size of the Bandcamp embed but it also made all of the Vimeo embeds on the same page very tiny (most are 16:9 aspect ratio).

Sorry about that. You are correct, the code provided above will change all embeds.

To restrict the code to that specific page you will need to add this instead:

.page-id-3197 iframe { width: auto !important; }

Those Vimeo embeds are on the same page so the above code has the same effect.

I based my answer on the page that was provided when the thread was originally opened (the albums page). That page only had Bandcamp embeds.

When you wrote that both Vimeo and Bandcamp embeds were affected, I thought that you wanted the code only to apply to the original page.

Can you provide us with the specific URL where you experiencing this issue?

It’s possible that this level of customization is outside of what we can support, but we can say for sure once we have the URL that you are looking at.

Yes, you’re right, my mistake. Here’s the page I am working on currently: https://robgillthings.net/agp/

thank you for your attention to this!

Thanks for providing the URL.

Unfortunately, the way that page is set up, we can’t make an adjustment to the Bandcamp embed without it also affecting the Vimeo embed as both are embedded as an iframe.

The code that we provided is scoped to the Albums page and will work there. The variation in the Vimeo video size on /agp/ is coming from Vimeo directly and isn’t being caused by the code provided earlier.

before:

View post on imgur.com

after:

View post on imgur.com

The code you are implementing in your screenshot is:

iframe {width: auto !important;}

You will need to remove that and replace it with:

.page-id-3197 iframe { width: auto !important; }

This will limit the change to only the /albums/ page. The .page-id-3197 must be included exactly as provided above.

I am addressing this remark:

“The variation in the Vimeo video size on /agp/ is coming from Vimeo directly and isn’t being caused by the code provided earlier. ”

Ultimately I need this to work on pages where there are embeds from other sources.

You will need to remove this code entirely from your site:

iframe {width: auto !important;}

It is changing the sizing of all embeds on your site.

My apologizes if my previous comment:

The variation in the Vimeo video size on /agp/ is coming from Vimeo directly and isn’t being caused by the code provided earlier.

wasn’t clear. I was referring to the fact that some of the Vimeo embeds are wider than others as shown in this screenshot:

https://d.pr/i/WLzjzV

There unfortunately isn’t a way to fix the Bandcamp embeds on pages with other embeds. To do so would require a level of custom coding that is outside of what we can support.