Embedded YouTube video missing on AMP posts

Posted in: Newspaper
Post count: 5

I recently activated AMP and within a day received my first email from Google Search Console to inform me that there is an issue with an embedded YouTube video on one of my posts. I embed all video in my posts the same way, and I am expecting a hundred more emails to follow this one.
The email states that there is a “Content mismatch: Missing embedded video”

I embed Youtube clips using the following code:
—————————————————————————————————————–
<div style=”float: right; margin-left: 15px;”><iframe src=”https://www.youtube.com/embed/iFWuW_IA4rY&#8221; width=”320″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>
—————————————————————————————————————–

Can I add extra code that would be used for AMP pages? I suspect I am going to have to revisit all posts with embedded video and fix them up manually. Any advice would be appreciated.

Post count: 5

Upon further investigation, I found that the tagdiv amp plugin is converting my iframe to amp-iframe but because I am using the iframe to embed a youtube video, I need it converted to amp-youtube instead.
Is there any way I can fix this?

Post count: 22421

Hello,

You can try the simple oembed functionality of wordpress instead. Simply place the youtube link in the content, not an iframe and WordPress will do the rest.

Thank you!

Post count: 5

Thank you, I will give that a try 🙂

Post count: 5

Thanks Bogdan B,
Using the oembed option fixes the amp issue.
Unfortunately this seems to mean that I will have to give up all the formatting I was using the <div> and <iframe> for. I was using the <div> to align the video to the left and wrap my text to the right. This embed, even if I use [embed] or [video] ignores any width settings and the video takes up the full width of my post.

Post count: 5

I have tried a number of different options:

OPTION 1:

<div style=”width: 50%; float: left; margin: 0 10px 5px 0;”>

</div>

This results in an embedded video wrapped to the left, text to the right like I want in the normal web page, but the amp page results in a video box with a broken link.
—————————————————————————————-
OPTION 2

<div style=”width: 50%; float: left; margin: 0 10px 5px 0;”>

[video src="https://www.youtube.com/watch?v=tFtjQKLElTQ"]

</div>

This also looks good on a normal webpage but the video <div> box takes up 90% of the width, has a broken video link and covers up the text wrapped to the right side of the post.
—————————————————————————————
OPTION 3:

<div style=”width: 50%; float: left; margin: 0 10px 5px 0;”>

[embed]https://www.youtube.com/watch?v=tFtjQKLElTQ[/embed]

</div>

This also looks good on a standard web page, but the amp page has no embedded video and results in the same “Content Mismatch” error on Google Search Console.
—————————————————————————————-

I am going to disable tagdiv amp plugin and try the automattic one instead. Will return to tagdiv plugin if I don’t come right there or try again later.

Post count: 20688

Hi,

None of those may work with AMP, also there could be inline style detected by AMP using such methods (inline styles are not permitted). Simply entering the link in the video will work with AMP as well. You could style the video after you enter it like this, if required.
For desktop maybe something like this
https://www.screencast.com/t/vwmCcjMCipYe
For AMP like this – https://www.screencast.com/t/UWuXsarwl
Custom code may be entered in the AMP plugin like this
https://forum.tagdiv.com/topic/center-imagen-featured-in-amp/
This could be considered a solution, you could make some tests if you want to.

Thanks

Viewing 7 posts - 1 through 7 (of 7 total)
The forum ‘Newspaper’ is closed to new topics and replies.