Correct Custom Rule For YouTube iframe Embed?

We are using embed from youtube like this example below and they are converting fine.

<iframe width="560" height="315" src="https://www.youtube.com/embed/thM_PEHQZLM" frameborder="0" allowfullscreen></iframe>

No plugins or short codes are used in the code.

Hi @djtechtools. Thanks for the feedback.

You’re right in that this is most likely caused by the transformer not recognizing some markup within your post.

Without seeing your source markup, it’ll be hard to say for sure. Could you provide the debug output shown in the post edit screen on the Facebook Instant Article box (after clicking the “toggle debug information” link)?

I expect it’ll be something along the lines of:

{
    "rules" : [
        {
            "class": "SocialEmbedRule",
            "selector" : "p iframe.youtube-player",
            "properties" : {
                "socialembed.url" : {
                    "type" : "string",
                    "selector" : "iframe",
                    "attribute": "src"
                }
            }
        }
    ]
}

@paulo thanks for the reply!
Here’s the debug info as requested:

Here’s the source:
https://pastebin.com/5PA0n415

and here’s the resulting transformed markup:
https://pastebin.com/gG1RhnZW

Hi @djtechtools. Thanks for the debug information. This indeed confirms that the cause of your issue is because the source markup is not recognized by the Transformer used to generate the Instant Articles markup.

Observation: the reason this works for @agk4444 is because his source markup is not wrapped within the additional <p> and <span> tags as yours is:

<p>
  <span class='embed-youtube' style='text-align:center; display: block;'>
    <iframe class='youtube-player' type='text/html' width='640' height='390' src='https://www.youtube.com/embed/aGXgwA-cKg8?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' frameborder='0' allowfullscreen='true'></iframe>
  </span>
</p>

Understanding how Transformer Rules work and how to configure them is complex, so I’m happy to say that we’ve extended our documentation with a section dedicated to giving clarity on the matter with supporting examples.

First and foremost, the main description of this plugin contains a high-level overview of the concept behind Transformer Rules. Additionally, supporting information has been added as FAQs and screenshots.

To go deeper, our main documentation contains examples and reference material for configuring your own Transformer Rules.

This should be sufficient resources to get you started in defining your own rules. As such, I’ll mark this issue as “Resolved” for now. If you reach a dead-end and are unable to get additional help from the community, please re-open the issue.

Hello Paulo.

The <p></p> wrapping is something WordPress automatically does when converting regular youtube url’s to embeds. So it would certainly be preferable to have a rule that converts this correctly to a social embed. Can you advice how to construct a custom rule to fit this purpose?

Regards!

@paulo – @mlemberg is exactly right. This is default core WP behavior, and as such we could really use some additional specific support.

Thanks for the further context. Can you confirm which version of WordPress you are using?

In my version of WordPress (v4.4.2), when I place a YouTube URL in my post’s content:

https://www.youtube.com/watch?v=dKrVegVI0Us

WP produces the following:

<div class="embed">
  <iframe width="840" height="473" src="https://www.youtube.com/embed/dKrVegVI0Us?feature=oembed" frameborder="0" allowfullscreen></iframe>
</div>

I am on 4.5.1–da_DK with theme ColorNews V 1.0.6 by ThemeGrill.

Pasting this:

https://www.youtube.com/watch?v=EDpp3tPzATY

WP produces:

<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe class='youtube-player' type='text/html' width='715' height='433' src='https://www.youtube.com/embed/EDpp3tPzATY?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' allowfullscreen='true' style='border:0;'></iframe></span></p>

@mlemberg, I’m wondering if there are possibly other plugins in your environment which could be affecting the output of what WP produces. Could you double check?

For example, the fact that the embed-youtube class gets added in a <span> tag must be coming from somewhere other than the vanilla WP installation (I’ve upgraded to the latest v4.5.1 to confirm).

Hello again.

I have now turned off all plugins except for Akismet and JetPack (which are WordPress standards) to test.

Adding the following text to the WYSIWYG:

Facebook-opslag:



Efter Facebook-opslag.

Youtube-opslag:



Efter Youtube-opslag.

Twitter-opslag:

Folkets vilje underkendt: Prestigeskib f?r alligevel ikke ?tumpet? navn https://t.co/iUHcqDZItz pic.twitter.com/qaFCHfBe5b
— Berlingske (@berlingske) May 6, 2016

Efter Twitter-opslag.

WP produces:

<p>Facebook-opslag:</p>
<p><fb:post href="https://www.facebook.com/Kongressen/posts/864778163631091"></fb:post></p>
<p>Efter Facebook-opslag.</p>
<p>Youtube-opslag:</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe class='youtube-player' type='text/html' width='715' height='433' src='https://www.youtube.com/embed/EDpp3tPzATY?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' allowfullscreen='true' style='border:0;'></iframe></span></p>
<p>Efter Youtube-opslag.</p>
<p>Twitter-opslag:</p>
<div class="fitvids-video">
<div class="embed">
<blockquote class="twitter-tweet" data-width="550">
<p lang="da" dir="ltr">Folkets vilje underkendt: Prestigeskib f?r alligevel ikke ?tumpet? navn <a href="https://t.co/iUHcqDZItz">https://t.co/iUHcqDZItz</a> <a href="https://t.co/qaFCHfBe5b">pic.twitter.com/qaFCHfBe5b</a></p>
<p>— Berlingske (@berlingske) <a href="https://twitter.com/berlingske/status/728568397202481156">May 6, 2016</a></p></blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></div>
</div>
<p>Efter Twitter-opslag.</p>

Instant Articles gets:

<p>Facebook-opslag:</p><p>Efter Facebook-opslag.</p><p>Youtube-opslag:</p><p>Efter Youtube-opslag.</p><p>Twitter-opslag:</p><p>Efter Twitter-opslag.</p>

Hi … I’ve got the same problem, YT embeds are getting wrapped in <p> and <span> tags … I tried adding this as a custom Transformer Rule, but it didn’t work. I’ll keep trying new options and post if I figure it out.

PAULO: Any idea why the rule isn’t working? Thanks!

{
    "rules" : [
        {
            "class": "SocialEmbedRule",
            "selector" : "p span.embed-youtube iframe.youtube-player",
            "properties" : {
                "socialembed.url" : {
                    "type" : "string",
                    "selector" : "iframe",
                    "attribute": "src"
                }
            }
        }
    ]
}

Confirming that this is still an issue for us as well. Paulo, could you please advise as to why the rule Luke mentioned above doesn’t work? This is this only thing preventing us from using this plugin and having instant articles working.

The only rule that worked is

{
"rules" : [
        {
            "class": "SocialEmbedRule",
            "selector" : "p",
            "properties" : {
                "socialembed.url" : {
                    "type" : "string",
                    "selector" : "iframe",
                    "attribute": "src"
                }
            }
        }
    ]
}

But it breaks everything else. As of now we are stuck using

<iframe width="560" height="315" src="https://www.youtube.com/embed/thM_PEHQZLM" frameborder="0" allowfullscreen></iframe>

Any solution to this..
My articles also not accepted by Facebook due to the missing video content. (youtube)

Hello plase help
On my wp Source Markup:

<p>Adele is currently on tour, but she gave the Billboard Music Award audience a gift in her absence tonight. The music video for her new 25 single “Send My Love (to Your New Lover)” just premiered on the show. The video had a simple concept—Adele at the microphone singing, with images of her overlapping—but it’s beautiful with the color, her dancing, and gorgeous singing blurring together.</p>
<p>?</p>
<p>?</p>
<p>?<br />
<iframe width="1280" height="720" src="https://www.youtube.com/embed/fk4BbF7B29w?rel=0" frameborder="0" allowfullscreen></iframe></p>

On my wp Transformed Markup:

<html>
  <head>
    <link rel="canonical" href="https://domain.com/ent/3595.html"/>
    <meta charset="utf-8"/>
    <meta property="op:generator" content="facebook-instant-articles-sdk-php"/>
    <meta property="op:generator:version" content="1.1.0"/>
    <meta property="op:generator:application" content="facebook-instant-articles-wp"/>
    <meta property="op:generator:application:version" content="2.11"/>
    <meta property="op:generator:transformer" content="facebook-instant-articles-sdk-php"/>
    <meta property="op:generator:transformer:version" content="1.1.0"/>
    <meta property="op:markup_version" content="v1.0"/>
    <meta property="fb:use_automatic_ad_placement" content="true"/>
    <meta property="fb:article_style" content="default"/>
  </head>
  <body>
    <article>
      <header>
        <figure>
          <img src="https://domain.com/wp-content/uploads/2016/05/2-9.jpg"/>
        </figure>
        <h1>Proven Ways To Lighten Dark Lips And Get Glossy And Shiny Lips!</h1>
        <time class="op-published" datetime="2016-05-23T16:02:15+00:00">May 23rd, 4:02pm</time>
        <time class="op-modified" datetime="2016-05-23T16:03:11+00:00">May 23rd, 4:03pm</time>
        <address><a>entadmin</a></address>
        <figure class="op-ad">
          <iframe src="https://www.xxxx.com/adnw_request?placement=14&adtype=banner300x250" width="300" height="250"></iframe>
        </figure>
      </header>
      <p>Lips are vital organs of our body that help us to talk, smile, eat, sip, and kiss. Lips are tactile organs and are sensitive to heat, cold and touch. The skin of the lips does not have the usual sweat or oil glands like other parts of the body and therefore lips become dry and chapped very easily. Thus we should take special care of our lips.</p>
      <p>Every woman in the world wants to look beautiful, and beauty begins from an appealing face. Lips are an important part of our face which enhances a woman’s beauty. Some women have a problem of dark lips. Darker lips are sometimes genetically inherited or sometimes our life style becomes a major factor to work behind darkening lips. Some of the reasons for dark lips are use of inferior quality of cosmetics, tobacco, chain smoking, hormonal imbalances in body, direct UV rays connection etc. There is no time to wear lipstick or lip balms at all times. Many of us shy from public appearances. There are a number of reasons but darker lips are one of the common problems affecting people of all ages.</p>
      <p>Lips that are healthy, clean, well maintained, soft, and smooth and having a pinkish or reddish hue are considered beautiful. Not everyone is born with soft, pink lips. But with regular care and daily beauty regime and by using the correct lip products you can surely attain attractive, pinkish lips. Watch the video to know the remedies and keep your lips soft and pink.</p>
      <p>?</p>
      <figure class="op-social">
        <iframe src="https://www.youtube.com/embed/OwoUMjSRBSg?feature=oembed"></iframe>
      </figure>
      <p>?</p>
      <p>Source:?https://metagirly.com/</p>
    </article>
  </body>
</html>

On my Facebook Publishing tools this message

<figure class="op-social"><iframe src="https://www.youtube.com/embed/fk4BbF7B29w?rel=0"></iframe></figure>
 HTML Embeds Require Valid Width: For embeds with no inner HTML between <iframe></iframe> tags, we recommend specifying both width and height on the <iframe> element. Learn more in Interactive under Format Reference in the Instant Article documentation.

HTML Embeds Require Valid Height: For embeds with no inner HTML between <iframe></iframe> tags, we recommend specifying both width and height on the <iframe> element. Learn more in Interactive under Format Reference in the Instant Article documentation.

What am I doing wrong?
Why does not receive Height and Width
Thank you