Remove and prevent automatic p tag wrappers on videos and iframes

Is there any reason you’re not using the standard oembed for inserting media? I use it for video and audio, and I don’t get the <p> tags, and they are fully responsive.

I wasn’t sure what you meant by “oEmbed” @kjodle, so I looked it up and found this:

https://codex.www.ads-software.com/Embeds

After reviewing, I realized that oEmbed simply means just copy-pasting the plain source URL. Well I tried that already to no avail. Here are a series of screenshots showing the desired look, and what I actually end up with using the plain link oEmbed method:

Desired look:

WordPress: Formatting video to have right height in blog – 02 – Desired look with perfect fit

Undesired result with oEmbed:

WordPress: Formatting video to have right height in blog – 03 – Undesired square cropping with oEmbed

As you can see, with the oEmbed method, the video and/or overlay auto-generated webp image is being cropped at the ends and making the video appear as a giant square, which is most definitely not the desired outcome.

• This reply was modified 6 years, 5 months ago by Eric Hepperle.
• This reply was modified 6 years, 5 months ago by Eric Hepperle.

I visited the page in question and removed the [raw] and <video> tags that wrap or contain the <iframe> — this seemed to give the desired outcome. I didn’t remove the <p> tag that is containing the <iframe>

Plus, commenting out padding-top: 30px under .entry-content > p:first-of-type also helps to show more of the YouTube poster image.

Are the [raw] and <video> tags getting automatically added?

@metamezzo No, I added the raw and video tags as a possible solution I saw in a Stack Overflow post. The trouble with removing those tags is that — and here is the interesting part:

The display appears to work, except when you visit other blog posts on the site, you see that every post has a blank spot at the top, the same size as the the dimensions of the YouTube video image display. This is because my hack targets the first p instance in the post because WP is automatically wrapping <p> tags on YouTube video links. There are ways to disable wpautop — which, as I have mentioned, didn’t work.

I wrapped the video link (and thus the hidden p tag) in a custom shortcode tag to try to target just that one, but it didn’t work because the p is just wrapping everything on that line. In other words, instead of having:

[raw]https://some-video-url[/raw]

which can be targeted by this custom function in functions.php

// https://stackoverflow.com/questions/44539888/remove-automatic-p-tag-in-wordpress#answer-44540531
function reformat_auto_p_tags($content) {
    $new_content = '';
    $pattern_full = '{(\[raw\].*?\[/raw\])}is';
    $pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
    $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
    foreach ($pieces as $piece) {
        if (preg_match($pattern_contents, $piece, $matches)) {
            $new_content .= $matches[1];
        } else {
            $new_content .= wptexturize(wpautop($piece));
        }
    }

    return $new_content;
}

OR

<video>https://some-video-url</video>

which could be targeted and styled with

.single video {}

I end up with this:

<p>[raw]<video>https://some-video-url</video>[/raw]</p>

I could give the <p> tag a class if I could access it, but because it is being wrapped after the page loads (I think?) it is not available at the time of creation and there doesn’t seem to be any way to edit it before it displays.

I have been unable to disable wpautop, but even if I could I wouldn’t want to. This is non tech savvy client website and it needs to retain the standard wpautop functionality. I just wish I could disable it for videos only.

So, now you can see what my dilemma is.

Thanks for your help.

• This reply was modified 6 years, 5 months ago by Eric Hepperle.
• This reply was modified 6 years, 5 months ago by Eric Hepperle.

What if we use a custom shortcode such as [myvid] to wrap the video URL, and then all [myvid] will do is wrap the resulting iframe in a <div> tag. You can also add a class to that <div> so you can target every such video iframe in a post.

[myvid]https://some-video-url[/myvid]

Then, you would also need to clean up the [myvid] shortcode via the ‘the_content’ filter. Here is an article discussing cleaning up shortcode output … https://www.wpexplorer.com/clean-up-wordpress-shortcode-formatting/.

With the above approach, hopefully we end up with something like the following:

<div class="myvid"><iframe ...>...</iframe></div>

Hope this helps.

As you can see, with the oEmbed method, the video and/or overlay auto-generated webp image is being cropped at the ends and making the video appear as a giant square, which is most definitely not the desired outcome.

The oembed method works for me, with no cropping and complete responsiveness. Here’s an example, and here’s the source code.

Try temporarily switching to the default 2017 theme and trying it again. If you get your desired result, it’s a theme issue. If that solves your problem, it’s a theme issue, and you’ll need to ask your theme vendor about that.

@kjodle Thanks for your suggestion. The past month has been busy and I’m not getting notifications for some reason when people reply to my www.ads-software.com posts, so I didn’t see this until today.

I really don’t want to switch themes because then I lose my settings. However, I suppose I could set up a staging version and switch the theme on that to 2017 without affecting the live site.

I will test out your suggestion and report back.