TinyMCE issues with embedding content

Hi everyone,

I’ve been wrestling with a CSS issue in ListingHive for hours and could really use some help. I’m trying to embed a YouTube video using the video_url attribute and get it to display properly on both desktop and mobile devices.

Here’s what I’ve tried so far:

css

.hp-listing__attribute.hp-listing__attribute--video_url,
iframe {
  width: auto;
  height: auto;
}

This works okay on mobile — the video appears small, which is what I want — but on desktop it shrinks the video to a tiny thumbnail-sized frame. I’m using a Code Snippet to drop the video beneath the description, and that part works fine. The issue is purely with sizing.

If I try to adjust the CSS to make the video larger on desktop, it ends up blowing up the size on mobile too. It seems like I can’t find a way to differentiate the sizing behavior between mobile and desktop.

I’ve spent hours trying different CSS approaches, and I always end up with one of two outcomes:

  • A) The video stays small on both desktop and mobile

  • B) The video is full-size on both, as if no CSS is applied at all

I’ve also tried the CSS snippets shared in other forum threads, but no luck.

What I’m trying to achieve:

  • A normal-sized video on desktop

  • A smaller, more compact video on mobile

Has anyone figured out a responsive CSS solution or a lightweight PHP workaround for this in ListingHive? I’d prefer not to go down the full customization route, since I want to avoid issues with future HivePress updates. I’m using a child theme for the site.

Thanks in advance for any suggestions!

Hi @TheFreak,

From my understanding, adding a YouTube URL to the description field will automatically convert the link to a video player once you view the listing. I don’t personally use videos on my site, but I’d assume they’re already code to resize.

If the URL entered into the description doesn’t work for your use-case, perhaps you could try that, then copy the CSS used to resize it.

I hope this helps!

Cheers,
Chris :victory_hand:

Hi @TheFreak,

I just tested this out myself.

If you paste a YouTube URL directly in the default description field, upon looking at the listing it will render as a desktop and mobile friendly video player/frame, etc.

If you want to add the video as a custom attribute instead of inserting it in the description, you need to make the field type a Textarea, and simply have the display part as the default %value%.

Now on the listing form, just enter a YouTube URL into your custom attribute for the URL video, and like the description field does, it’ll automatically render the video at the appropriate screensize.

Sorry to hear you wasted a day on this, but at least we’ve both learned something new. Hopefully, this helps someone else with the same issue in the future.

Edit: if this isn’t the default behavior for you, perhaps, there’s a conflict or caching issue.

Cheers,
Chris :victory_hand:

@ChrisB — thank you!

As you probably noticed, I deleted my earlier post — even though it resized the video correctly for desktop and mobile, it somehow broke the Submit Listing function in the process. No good deed goes unpunished, right? :sweat_smile:

I spent nearly a full day trying to get the YouTube embed to behave responsively using the video_url attribute. Your Textarea + %value% tip solved it instantly. I was deep in the weeds with Code Snippets and CSS, trying to force a solution, but your approach was simple and effective. Just goes to show AI isn’t replacing human problem-solvers anytime soon!

I didn’t test the Description field method because I’m using a Code Snippet to enable the WordPress toolbar via TinyMCE. When I embed a video that way, it doesn’t render properly — probably due to how the content is parsed.

Also, I’ve gone down a rabbit hole with the Description field itself. Since it’s not a Text Area, it lacks the HTML checkbox option, and if someone exceeds the default 10,240 character limit, it breaks the Submit Listing process. It creates a strange cache loop: photos get uploaded to Media, but the listing ends up in some phantom draft state — not visible in the backend and stuck in limbo. I’m sure it has something to do with the TinyMCE Code Snippet I had to add for formatting the Description.

I tried adding another Text Area below the Description for a longer character limit, but HivePress doesn’t make that easy unless you start customizing the Page or Block templates, which I’m trying to avoid for update compatibility.

My current workaround is to add a character counter via Code Snippet and cap user input at around 3,500 characters to stay safe. It’s been a bit of a “Whack-a-Mole” situation, so your Text Area solution was a breath of fresh air. Everything I found in the forum kept pointing to the Embed function, which just added to the confusion.

Really appreciate you taking the time to test and share — hopefully this thread saves someone else from the same rabbit hole!

1 Like

Hi,

Just wanted to add one more possible solution: if you need to add the link, you can create a custom attribute of an embedded type, assign the display area, and insert the link in this field. It should convert the link to the video on the listing page.
But yes, the main solution is to insert the link in the description field and it should be transformed into the video [Embed content from other platforms – WordPress.com Support].

1 Like

@kseniia — yep, that’s the exact rabbit hole I fell into :sweat_smile:

It sounds simple to drop a link into the Description field and let WordPress handle the embed, but once you introduce TinyMCE via a Code Snippet, things get messy fast. The embed tool inside TinyMCE doesn’t render responsively on mobile, and the Description field itself won’t resize properly unless you leave it as a plain text box — which defeats the purpose of adding formatting options for users.

Here’s the snippet I’ve been using to enable the WordPress toolbar:

add_filter( ‘hivepress/v1/models/listing/fields’, function( $fields ) {
if ( isset( $fields\[‘description’\] ) ) {
$fields\[‘description’\]\[‘html’\] = true;
$fields\[‘description’\]\[‘editor’\] = \[
‘teeny’         => true,
‘media_buttons’ => false,
‘quicktags’     => true,
‘wpautop’       => true,
\];
$fields\[‘description’\]\[‘sanitize’\] = ‘wp_kses_post’;
}
return $fields;
}, 1000 );
  1. Add it to the form

So it appears in the front-end submission form and gets saved:

add_action( ‘wp_enqueue_scripts’, function () {
wp_enqueue_script( ‘jquery’ );
$js = <<<JS
(function($){
function syncEditors(){
if ( typeof tinyMCE !== ‘undefined’ && tinyMCE ) {
if (typeof tinyMCE.triggerSave === ‘function’) {
tinyMCE.triggerSave();
} else if (window.wp && wp.editor && typeof wp.editor.updateTextArea === ‘function’) {
wp.editor.updateTextArea();
}
}
}
$(document).on(‘submit’, ‘.hp-form form’, function(){ syncEditors(); });
$(document).on(‘click’, ‘.hp-form button\[type=“submit”\], .hp-form input\[type=“submit”\]’, function(){ syncEditors(); });
})(jQuery);
JS;
wp_add_inline_script( ‘jquery’, $js, ‘after’ );
});

So yeah — if you’re using TinyMCE, embedding a video via the Description field looks like it should work, but it won’t behave on mobile without extra CSS or JS. Definitely not plug-and-play.

Appreciate the extra tip about the embedded attribute type though — I was able to get it working with the TextArea and %video% without issue. Now I’m onto the next challenge: supporting longer descriptions. Ideally, I want listings to look like this one: The EV Revolution That’s Still Stuck in Traffic.

One thing to note: the Description field isn’t a HivePress attribute — it’s part of the theme’s core listing model, so you can’t customize it like other fields in the admin panel. If you add a custom TextArea attribute, HivePress gives you the option to “Allow for HTML editing,” but that checkbox doesn’t exist for the Description field. That’s why I had to use a Code Snippet to enable TinyMCE and allow users to format their descriptions.

On one of my other sites (haven’t tested them all yet, but it seems consistent), if the character count goes beyond a certain threshold — still trying to nail down the exact number — hitting Submit creates a “phantom draft.” The listing vanishes from the backend, photos get uploaded, but the post itself disappears into limbo. I suspect it’s tied to the TinyMCE integration and how the Description field is parsed.

Right now, I’m working on a character counter and warning system to prevent users from falling into that endless loop of failed submissions. I think it’s related to the difference between the “text field” and “text area” types, but I haven’t confirmed that yet. All I know is: once you cross about ~4,000 characters, things start breaking. MySQL’s TEXT field can technically handle up to 65,535 characters, but something in the stack isn’t playing nice. Still digging.

Thank you for sharing this. We’ll work on improving the editor UX in future updates.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.