WordPress.org

Ready to get started?Download WordPress

Forums

YouTube
[resolved] Priority of wordpress filters (11 posts)

  1. webmaster128
    Member
    Posted 9 months ago #

    Is there any particular reason why the priority of the YouTube html replacement is set to 1?

    This causes weird spaces when embedding a YouTube video into text.

    Assume you have the following post:

    We are proud to present the work of our two new avid helpers Christian and Maurice. Without further ado: enjoy the animation, and make sure to watch it in HD!
    
    http://www.youtube.com/watch?v=5OcTXnLVfFk
    
    Please feel free to share it with friends or colleagues that are interested in communicating securely.

    This gets transformed into

    <p>We are proud to present the work of our two new avid helpers Christian and Maurice. Without further ado: enjoy the animation, and make sure to watch it in HD!<br />
    <iframe [...]></iframe><br />
    Please feel free to share it with friends or colleagues that are interested in communicating securely.</p>

    in which case there is no margin between text and video.

    Other Hacks like using " "-Lines are ignored by WordPress.

    My solution

    In wp-content/plugins/youtube-embed-plus change

    add_filter('the_content', 'YouTubePrefs::apply_prefs', 1);

    to

    add_filter('the_content', 'YouTubePrefs::apply_prefs', 11);

    and add p > iframe { vertical-align: bottom; } to your style.css.

    Since priority 10 is the default value, first WordPress will convert content to

    <p>My text ...</p>
    <p>http://www.youtube.com/watch?v=5OcTXnLVfFk</p>
    <p>My 2nd text</p>

    and in a second step replace the link with the YouTube-Iframe.

    This leads to nice, natural margins above and below the video.

    Cheers,

    Simon

    http://wordpress.org/plugins/youtube-embed-plus/

  2. embedplus
    Member
    Plugin Author

    Posted 9 months ago #

    Hello Simon,

    Thanks for your input.

    In our tests, several issues arose when filtering so late. One of which is that WordPress' built-in oembed function would perform a filter before our plugin does. Therefore you'd never get the cool defaults you made in your settings page, etc.

    If all you wanted was to surround the embed with a paragraph tag, you could simply output the code as <p><iframe ... ></p> instead of the current <iframe ...>, which would be much less dangerous.

    However, we've been able to get spacing without any code edits by just pressing additional enters around the link. When you press enter a couple of times before and after the link while in Visual view, the Text view of the editor shows this:

    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a
    
    &nbsp;
    
    http://www.youtube.com/watch?v=quwebVjAEJA
    
    &nbsp;
    
    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a

    Thanks again! We'd be happy to offer you a free PRO activation for your efforts and time. Let us know how to contact you.

    -EmbedPlus Team

  3. webmaster128
    Member
    Posted 9 months ago #

    Hi EmbedPlus-Team,

    thanks for your suggestions. I tried them and came up with a possible third option.

    Suggestion 1 - Surround output iframe with p
    Works fine, since WordPress sees an input like

    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsu
    <p><iframe ...></p>
    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum

    which is properly translated to three paragraphs. CSS classes are preserved as well, so you can have the following code in order to be able to style the Youtube paragraph:

    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsu
    <p class="youtube-embed"><iframe ...></p>
    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum

    This might be a possible default code.

    Awesome because:
    - $opt_center code can be included in the <p>
    - clean code in the WordPress editor

    Suggestion 2 - Hit Enter in the editor
    Works not so fine. Using your REGEX pattern, you eat up every whitespace around a Youtube link. This leads to the following code for WordPress to filter:

    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a
    
    &nbsp;
    <iframe ...></iframe>
    &nbsp;
    
    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a

    which then gets

    <p>Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a</p>
    <p>&nbsp;<br />
    <iframe ...></iframe><br />
    &nbsp;</p>
    <p>Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a</p>

    Not awesome because
    - 2 lines height space before and after the video
    - unclean code in the editor.

    Suggestion 3 - Stop eating newlines around link(My idea)

    The regex pattern
    '@^\s*https?://(?:www\.)?(?:(?:youtube.com/watch\?)|(?:youtu.be/))([^\s"]+)\s*$@im'
    eats up every whitespace around a link, including newlines.

    If you replace \s* with [ [:blank:] ]* (Remove space between [ and [, I have a wordpress.org syntax problem here) the newline character is not included anymore. Thus an editor input like

    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a
    
    http://www.youtube.com/watch?v=quwebVjAEJA
    
    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a

    gets

    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a
    
    <iframe ...></iframe>
    
    Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a

    and then

    <p>Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a</p>
    
    <p><iframe ...></iframe></p>
    
    <p>Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a Lorem ipsum a</p>

    Awesome because:
    - doesn't hack the wordpress paragraph logic
    - clean code in the WordPress editor

    Thanks for your offer. But before I try PRO I need a solid basic plugin :)

    Best,

    Simon

  4. embedplus
    Member
    Plugin Author

    Posted 9 months ago #

    Hey Simon,

    We're going to explore the third idea.

    Thanks for being a constructive!
    -EmbedPlus Team

  5. embedplus
    Member
    Plugin Author

    Posted 9 months ago #

    Looks like with a little extra tweaking a variation of that third option is possible. It's been updated to version 4.1. We also have an additional checkbox in the admin panel that allows users to stick with the older spacing if they want to keep things the same.

  6. webmaster128
    Member
    Posted 9 months ago #

    Hey devs,

    thanks for your fast reaction and support. I just installed the update.

    But I don't get why you have the [\r\n]{0,1} around the regex.

    2 problems:

    The standard case

    Lorem ipsum a Lorem ipsum
    
    http://www.youtube.com/watch?v=quwebVjAEJA
    
    Lorem ipsum a Lorem ipsum

    still becomes

    <p>Lorem ipsum a Lorem ipsum<br />
    <iframe [...]></iframe><br />
    Lorem ipsum a Lorem ipsum</p>

    and [\r\n]{0,1} does not make any sense. It means: zero or one characters out of the set \r, \n. Thus a windows linebreak ("\r\n") is not matched which means that the \r makes becomes useless.

    Cheers,

    Simon

  7. webmaster128
    Member
    Posted 9 months ago #

    Okay forget my first point. It works fine. I just don't understand why it works

  8. embedplus
    Member
    Plugin Author

    Posted 9 months ago #

    Thanks for your comments!

    -EmbedPlus Team

  9. webmaster128
    Member
    Posted 9 months ago #

    It turned out that TinyMCE in WordPress always saves linebreaks as "\r\n" no matter which OS the author is using.

  10. webmaster128
    Member
    Posted 9 months ago #

    What I now use is the following pattern:

    @^[\r\t ]*https?://(?:www\.)?(?:(?:youtube.com/watch\?)|(?:youtu.be/))([^\s"]+)[\r\t ]*$@im

    This causes the same effect but is much more clean and intuitive since you don't want to cut off the "\n".

    Thanks and cheers,

    Simon

  11. embedplus
    Member
    Plugin Author

    Posted 9 months ago #

    Simon,

    We'll give that regex a shot.

    Thanks,
    -EmbedPlus Team

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.