Responsive Player

[daystartv]

I’m running into an issue trying to make my image and audio player the same height. This is the page, https://daystarpeacecd.wpengine.com/songs-and-stories
When I set the player to 100% height, as the browser is resized it still shifts and is no longer aligned with the image next to it.
Is there a way to keep these at the same height?

[rad]

Hi @daystartv,

Thanks for reaching out.

I recommend contacting the APMap plugin author, the sizing is controlled by its own styling and it appears that it’s not responsive.

.map-dark {
    position: relative;
    min-width: 320px;
    width: 100%;
    max-width: 930px;
    margin: 0 auto;
    opacity: 0;
}

Unfortunately, it may not be a simple change since it’s a player with multiple structures.

Thanks!

[daystartv]

I did, they told me you can make the player height 100% of the parent element in which player is placed:

.map-dark {
height: 100%;
}

Then if your parent that holds player and the one that holds image as same height, they will be the same, but you also need to make image 100% height of the parent.

But when I try to change the image or container height, it doesn’t seem to help.

[rad]

Hi @daystartv,

I see, so the issue is making the image responsive? The image is already responsive but it also maintains its aspect ratio. Which means, the height changes along with the width, else, this will happen

A stretched image without proper quality, it’s the same concept on videos where the video maintains its aspect ratio so it wouldn’t be distorted (the result, black bar). Perhaps what you need to do is make the player respond the same as the image, respecting the aspect ratio. And this would do that

.map-dark {
    height: 0px;
    width: 100%;
    max-width: 100%;
    padding-bottom: 100%;
}

Just like how video elements are responsive while locked on its aspect ratio. But again, that’s not gonna work since your player has its own responsive configuration. It locks to 85px once the container has no height,

.map-dark .map-player-holder {
    position: relative;
    width: 100%;
    height: 85px;
    background: #1f1f1f;
    overflow: hidden;
}

The result, the two will not really sync. Unless you wish your image to be distorted as well, then please add height: 100%; to your classic image element’s Style input.

Thanks!