Youtube iframe width and height removed from post

megatonmedia
(@megatonmedia)

7 years, 11 months ago
When pasting into our posts the iframe embed for youtube is structured like so:

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

But Facebook complains that:
```
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.
```
Looking at the post structure I find the youtube videos are passed to facebook formatted like this:

<figure class="op-social"><iframe src="https://www.youtube.com/embed/3HAan1HBIEg"></iframe></figure>

it’s stripping out the width and height of the iframe. Any idea of cause? The only difference I can see from the normal youtube embed is that the width and height come after the URL, instead of before.

https://wordpress.org/plugins/fb-instant-articles/

Viewing 2 replies - 1 through 2 (of 2 total)

(@gil-reich)

Try setting this as the Custom Rules in the Instant Articles settings:

{
    "rules":
    [{
        "class": "SocialEmbedRule",
        "selector" : "//p[iframe]",
        "properties" : {
            "socialembed.url" : {
                "type" : "string",
                "selector" : "iframe",
                "attribute": "src"
            },
            "socialembed.height" : {
                "type" : "int",
                "selector" : "iframe",
                "attribute": "height"
            },
            "socialembed.width" : {
                "type" : "int",
                "selector" : "iframe",
                "attribute": "width"
            },
            "socialembed.iframe" : {
                "type" : "children",
                "selector" : "iframe"
            },
            "socialembed.caption" : {
                "type" : "element",
                "selector" : "figcaption"
            }
        }
	}]
}