Title: Video embeds from URL / TEXTAREA attributes no longer resize on mobile (regardless of plugins)

Bug Reports
1

Hi HivePress team,

I’m running into a problem with video embeds inside listing attributes that used to work correctly and now no longer do.

This issue occurs even with all third-party plugins disabled, so it appears to be related to how HivePress renders attribute output.

Setup

  • WordPress: version

  • HivePress: version

  • Theme: ListingHive (or your theme)

(The issue persists even with all other plugins disabled.)

What I’m trying to do

I need a listing attribute where a user can paste a simple YouTube link and have the embedded video display responsively on mobile devices (iPhone, Samsung, etc.).

HivePress provides two attribute types that seem intended for this:

  • URL attribute

  • TEXTAREA attribute

What works vs. what doesn’t

1. URL attribute

  • The video embed has never been responsive on mobile.

  • It overflows horizontally and does not scale to the screen width.

2. TEXTAREA attribute

  • This used to work perfectly for YouTube embeds.

  • Videos resized correctly and stayed within the layout on mobile.

However, after a recent HivePress update, the TEXTAREA attribute stopped being responsive. It now behaves exactly like the URL attribute:

  • Videos overflow the screen

  • They do not scale down

  • The layout breaks on mobile devices

This occurs when using:

  • A plain YouTube URL

  • A WordPress auto-embed

  • No embed plugins active

  • Default theme settings

So the previous workaround (using TEXTAREA instead of URL) is no longer functional.

What I need to know

  1. Has the way HivePress outputs TEXTAREA or URL attribute values changed recently?
    It appears that embeds are no longer wrapped or filtered in a way that allows responsive scaling.

  2. Is there a recommended attribute type (or method) for displaying YouTube or other oEmbed videos in a responsive way on mobile?

  3. Is there a HivePress hook or template part I should override so I can manually wrap the video output in a responsive container?

Why this matters

Right now:

  • URL attributes cannot display responsive videos, and

  • TEXTAREA attributes no longer display responsive videos, even though they previously did.

Video responsiveness is essential for my listings.

Here’s a sample listing showing the issue:
https://www.coolcarguy.com/coolcars/the-1976-porsche-911-turbo-driven-826664-miles-the-legend-from-youtube/

Any guidance, best practices, or code examples for restoring mobile-responsive video embeds inside HivePress listing attributes would be greatly appreciated.

Thanks in advance for your help!

2

UPDATE & WORKING SOLUTION

I found the fix, so I’m posting it here in case anyone else runs into this.

:check_mark: Use EMBED as your attribute type

  • URL fields only output the raw link (no auto-embed)

  • TEXTAREA used to embed/rescale but no longer does

  • EMBED is the correct HivePress attribute type because it outputs the actual <iframe>

:check_mark: HivePress does not add responsive CSS by default

So on mobile, the YouTube/TikTok iframe can overflow the screen unless you manually add responsiveness.

:check_mark: How to fix it

  1. Go to HivePress → Listings → Attributes

  2. Click your video attribute

  3. Check the Slug (e.g. youtube, video-url, my-video, etc.)

  4. Add CSS for that specific attribute:

/* Make HivePress EMBED attribute responsive */
/* Replace {slug} with your actual attribute slug */

.hp-listing__attribute.hp-listing__attribute--{slug} iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box;
    aspect-ratio: 16 / 9;
}

After adding this, YouTube/TikTok embeds resize correctly on iPhone, Samsung, and all mobile devices.

:check_mark: If using Code Snippets, remember:

Code Snippets only runs PHP, so you must wrap your CSS like this:

add_action( 'wp_head', function () { ?>
<style>
/* Replace {slug} with your slug here */
.hp-listing__attribute.hp-listing__attribute--{slug} iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box;
    aspect-ratio: 16 / 9;
}
</style>
<?php } );

Works perfectly across all of my sites now.

Hope this helps someone else! :tada:

1 Like
3

Hi,

Thank you for reporting this bug. We’ve been able to confirm it on our side, and we’ll include a fix in future updates.

Regarding attribute types, just to clarify:

  • The URL attribute type doesn’t convert links into embedded content — it’s intended purely for displaying links.
  • The Text Area and Embed attribute types do support converting links into embedded content, and we recommend using the Embed type for this purpose.
  • Another option is to place the link in the description field. If it’s a supported format, WordPress will automatically convert it into embedded content.

Once again, thank you for taking the time to report this issue.