[Solved] Help with placing this embedded audio player

Design help General
1

:: New 5/11 – offering a $50 bounty via PayPal for the first person who can help me make this embedded element behave! ::

Hi. I’m using jPlayer with the “flat” skin on my site. I have four 160px wide graphics, and under each I’d like to center an audio player. I need to use an embed widget for the player, and that part’s OK, but I don’t have the placement / settings right.

I’ve tried replacing the widget with a 160px wide .jpg (as a placeholder), and it seems to work fine – it centers snugly under the image on each layout. But the widget is performing differently, shifting left and right.

Desktop view:

Tablet view:

Phone view:

If you’re so inclined, here’s the public link. Thanks!
https://webflow.com/design/alluringaudio?preview=6e7f6571d70bbaafe8cb2cbc1f197871

Doug

2

Hi Doug, here is something you can try yourself, see if this works, I will paste the image below:

Style your html embed with a class name, I used “jplayer container”. Give left and right margin set to “auto”. Set max width to 160px.

Save changes and publish, and see if you still have issue. Cheers.

3

Hi Dave. Thanks for the suggestion… it didn’t work. The public link should go to the updated page.

I tried replacing the embed code with a 160px wide .jpg, to test whether it’s an issue with how I’ve set things up, or with how WebFlow is handling the embedded object. I’ll play around with that some more.

5

Here’s the latest:

  • I got the placeholder .jpg to align correctly, and to wrap correctly at different widths.

  • I’m still having trouble with the embedded player. Both the players and the placeholder .jps are the same class.

Thanks for looking!

Public link: Webflow - AlluringAudio

911×847 117 KB

6

Update: I tried embedding different widgets (like clocks and such), and they had the same alignment problem. So it seems that it’s not specific to the audio player I’m using, but rather to embedded elements.

7

Hi, can you try the following:

Paste the following code into the HEAD panel of the Custom Code section in Site Settings:

<style>
.audio-player {

margin-left: -2px!important;
max-width: 160px!important;

}

</style>

Give your preview placeholder image a new class name and remove the class “audio player” from those preview images. I used a class name of “preview-placeholder”:

Then for the html embed widget, I updated the “audio-player” class settings:

Try that, and add the css overrides to the head section in your site settings and then re-publish and see how it looks.

Cheers

8

Progress! Thanks, Dave, for the continued help.

Now, on the desktop width, the players are aligned correctly, as are the preview placeholders:

953×76 21.2 KB

But in tablet width, the embedded elements drift to the right:

739×58 16.2 KB

And in phone view, the embedded elements go crazy and fly out to the left:

Is that something that’s fixable with an overriding style in the head section, also?

Finally, making sure my other placement settings for the audio-player class are correct:

Yoroshiku,
Doug

9

Problem solved by including the offending player in a new container, and adding style some code to the header file. Thanks @bartekkustra!

1 Like