Ghost: Missing `amp-youtube` component

[kevinansfield]

amperize has been updated to 0.6.0 and will now transform YouTube iframes into <amp-youtube> components instead of <amp-iframe> components. However, our code that injects the required custom element scripts has not been updated, this will need to be fixed to prevent YouTube videos being broken on AMP pages.

Code: https://github.com/TryGhost/Ghost/blob/master/core/frontend/apps/amp/lib/helpers/amp_components.js
Test: https://github.com/TryGhost/Ghost/blob/master/core/test/unit/apps/amp/amp_components_spec.js

We already look for <iframe but this check is no longer quite so simple, we'll need to test for standard vs youtube iframe's. I suggest matching the new check with the YouTube src detection used in amperize: https://github.com/jbhannah/amperize/pull/113/files#diff-b6be0f29fc2ff7febe6f5acc561aef9cR299

[prafullakiran]

I will take a shot at this and see if I can help here

[prafullakiran]

@kevinansfield I worked on a regex (extended from the one in amperize) to match youtube iframes. The rough logic for completing this issue is:

a = Count number of youtube iframes using regex match
b = Count number of total iframes using simple regex match (html.match('/<iframe/'))
if (a > 0) - add the youtube component
if (b > a) - add the regular iframe component (since we have atleast one non-youtube iframe)

Please let me know if this sounds fine. Ideally we could have a second regex to match any non-youtube iframe, but it appears to be complex to create that regex.

[jessehouwing]

This is now causing issues:

[jcoffland]

As a quick hack I tried adding the following to https://github.com/TryGhost/Ghost/blob/master/core/frontend/apps/amp/lib/helpers/amp_components.js:

    if (html.indexOf('youtube.com/embed') !== -1) {
        components.push('<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>');
    }

I realize this is not ideal because it will always include amp-iframe with amp-youtube even if amp-iframe is not needed.

This alone did not work. I also had to add lines to https://github.com/TryGhost/Ghost/blob/master/core/frontend/apps/amp/lib/helpers/amp_content.js

I realize this is not complete but it maybe a good starting point or at least a workaround for others. PR to follow.

[ekerstein]

The PR from @jcoffland works great for me. As far as I can tell, you can't embed a YouTube video with the short link (youtu.be). So matching on "youtube.com/embed" seems appropriate to me.

I also made a version that uses the logic @prafullakiran suggested above, i.e. it counts the number of youtube embed references versus iframe references and decides which script tag to include based on that.

I'm not sure the speed/efficiency tradeoff. It may simply be faster to include the amp-iframe and amp-youtube scripts in every post rather than try to determine which one.

I also included an integration test. I'll post my PR in a moment.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jcoffland]

still need this.

[technikmensch-woody]

Issue is still causing issues and videos not displayed by {{amp_content}}

[bhellman1]

Anyone know the latest status for supporting AMP+YouTube within Ghost core?

[TachafineAITTouda]

i am Using Ghost 3.5 and i had this error 3 days ago
However i fixed the error by adding some little hacks until i have time to concentrate on it.
by adding the amp-youtube Tag in allowedAMPTags and allowedAMPAttributes
https://github.com/TryGhost/Ghost/blob/master/core/frontend/apps/amp/lib/helpers/amp_content.js
and also adding the amp youtube javscript in the components if you have a youtube embed videos
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
https://github.com/TryGhost/Ghost/blob/master/core/frontend/apps/amp/lib/helpers/amp_components.js
check details of youtube-amp in the official docs
https://amp.dev/documentation/examples/components/amp-youtube/