I set this as the Custom Rules in the Settings, and it solved a very similar problem for me. It takes a rule that’s in the rules-configuration.json file, but I added the height and width parts.
{
"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"
}
}
}]
}
I’m still having this issue. We’ve tried a number of different custom rules, including the one above that Gil shared. None of them seem to alleviate the issue.
My source code remains the same as above. I did notice that in our page source there’s a <span> inbetween the <p> and the <iframe>. Does that need to be accounted for?:
<p><span class='embed-youtube' style='text-align:center; display: block;'><iframe class='youtube-player' type='text/html' width='640' height='390' src='http://www.youtube.com/embed/82xt1r3IpP0?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>
Once again, this is the *only thing preventing us from successfully using instant articles*. The documentation has not been any help, we’ve tried any number of custom rules and none seem to work.
Please remove the [Resolved] tag on this thread as it is not accurate.
Yes, the span will prevent this from working. The selector “selector” : “//p[iframe]” won’t catch it as the iframe isn’t directly in the paragraph.
I think you just need to replace the selector in the rule above.
I’m not great with XPath. I think this might work:
“selector” : “//iframe[@class=’youtube-player’]”
@gil, thanks for the response.
Just tried that, still getting the same issue:
No rules defined for <iframe class=”youtube-player”> in the context of Paragraph
OK, how about going the other way, changing the content to match the rules that work?
Before calling the transformer, the plugin has this.
$content = apply_filters( ‘the_content’, $content );
So in functions.php, you should be able to add something like this:
add_filter( 'instant_articles_content', 'change_ia_content', 10, 3 );
function change_ia_content ( $content ) {
$pattern = '~<p><span class='embed-youtube' style='text-align:center; display: block;'><iframe.*</iframe></span></p>~';
preg_match_all($pattern, $content, $matches);
foreach ($matches[0] as $match) {
$wrappedframe = str_replace("<p><span class='embed-youtube' style='text-align:center; display: block;'>", "", $match);
$wrappedframe = str_replace('</span></p>', '', $wrappedframe);
//replace original iframe with new in content
$content = str_replace($match, $wrappedframe, $content);
}
return $content;
}
I don’t know if that code is exactly right, but I think that idea should work.
Then you should be able to remove the custom rules and you should be in the same position as agk4444, for whom everything works.
Last thought. I wonder if class=”youtube-player” is breaking this. It shouldn’t, but, who knows? So you could similarly replace that out in the function above.
Good luck!
Has anyone tried Gil’s code above? My problem is I have much more complex wrappers around the iframe (put there by the Advanced Responsive Video plugin – which I can’t turn off because then WP won’t know what to do with the shortcodes in older posts). With that complexity, I may not be able to get from here to there (above my coding level…)
Same problem as @terriz here. Tried different kind of transformer rule but nothing works.
Does anyone solved the youtube videos problem?
we still have no video in our Instant Articles…
🙁
If somebody can suggest the transformation rule for the below custom video embed (video embedded using shortcode)
<div class=”videowrapbody” itemscope itemtype=”http://schema.org/VideoObject”>
<div class=”videowrap”><iframe src=”https://www.youtube.com/embed/8Q1GVOYIcKc” frameborder=”0″ width=”100%” height=”500″ scrolling=”yes” class=”iframe-class”></iframe></div>
</div>
Source Markup :
<p>Women, finally this is the sanitary pad advertisment done correctly. No more of blue-stained, white and flowery fare you were watching all this while. The advertisment created for Bodyform’s Red.fit campaign by London agency AMV BBDO shows what actually dealing with periods is like.</p>
<p>The Bodyform is a sanitary product brand which has come up with the video which achieves to change the outlook towards period blood. The ad, athough causes no awkwardness.</p>
<p>The video shows bleeding feet of a ballet dancer, bloodied nose of a boxer and a rugby player.</p>
<p>This ad going viral is being praised for showing real blood in an advertisment and has gained a massive support on social media. Earlier periods blood was symbolised using blue liquid.</p>
<p>To feel great, many of the viewers commented, “Who knew a period commercial could make me feel like a warrior”.</p>
<p><!– iframe plugin v.3.0 wordpress.org/plugins/iframe/ –></p>
<div class=”videowrapbody” itemscope itemtype=”http://schema.org/VideoObject”>
<div class=”videowrap”><iframe src=”https://www.youtube.com/embed/8Q1GVOYIcKc” frameborder=”0″ width=”100%” height=”500″ scrolling=”yes” class=”iframe-class”></iframe></div>
</div>
Transformed Markup:
<html>
<head>
<link rel=”canonical” href=”http://www.soposted.com/zing/life/watch-this-periods-ad-that-shows-the-real-strength-of-women”/>
<meta charset=”utf-8″/>
<meta property=”op:generator” content=”facebook-instant-articles-sdk-php”/>
<meta property=”op:generator:version” content=”1.3.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.3.0″/>
<meta property=”op:markup_version” content=”v1.0″/>
<meta property=”fb:article_style” content=”default”/>
</head>
<body>
<article>
<header>
<figure>
<img src=”http://www.soposted.com/wp-content/uploads/2016/07/p.jpg”/>
</figure>
<h1>WATCH! This periods ad that shows the real strength of women</h1>
<time class=”op-published” datetime=”2016-07-18T09:22:30+00:00″>July 18th, 9:22am</time>
<time class=”op-modified” datetime=”2016-07-20T13:46:24+00:00″>July 20th, 1:46pm</time>
<address>admin</address>
</header>
<p>Women, finally this is the sanitary pad advertisment done correctly. No more of blue-stained, white and flowery fare you were watching all this while. The advertisment created for Bodyform’s Red.fit campaign by London agency AMV BBDO shows what actually dealing with periods is like.</p>
<p>The Bodyform is a sanitary product brand which has come up with the video which achieves to change the outlook towards period blood. The ad, athough causes no awkwardness.</p>
<p>The video shows bleeding feet of a ballet dancer, bloodied nose of a boxer and a rugby player.</p>
<p>This ad going viral is being praised for showing real blood in an advertisment and has gained a massive support on social media. Earlier periods blood was symbolised using blue liquid.</p>
<p>To feel great, many of the viewers commented, “Who knew a period commercial could make me feel like a warrior”.</p>
<figure class=”op-tracker”>
<iframe><script type=”text/javascript” defer=”defer”>
(function (i, s, o, g, r, a, m) {
i[‘GoogleAnalyticsObject’] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, ‘script’, ‘//www.google-analytics.com/analytics.js’, ‘ga’);
ga(‘create’, ‘UA-65171386-1’, ‘auto’);
ga(‘send’, ‘pageview’);
</script> </iframe>
</figure>
</article>
</body>
</html>
hi Facebook instant article team pls im using a short code plugin to embed my youtube videos pls how can i be able to convert it to a format that is compatible with facebook instant article
