Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

🐛 Fixed youtube video embeds not displaying in AMP pages (#11058)

Browse source 
closes https://github.com/TryGhost/Ghost/issues/10972

- adds `amp-youtube` to the allowed AMP components list
- adjusts `{{amp_components}}` output to include the `amp-youtube` script if any iframes with youtube urls are detected in the AMP content

Co-authored-by: Joseph Coffland <joseph@cauldrondevelopment.com>
This commit is contained in:
Edward Kerstein 2020-03-16 10:39:10 -04:00 • committed by GitHub
parent b529a7ab86
commit 129610526d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
core/frontend/apps/amp/lib/helpers/amp_components.js
View file

@ -23,7 +23,14 @@ function ampComponents() {
components.push('<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>');
}
if (html.indexOf('<iframe') !== -1) {
let iframeCount = (html.match(/(<iframe)(.*?)(<\/iframe>)/gi) || []).length,
youtubeCount = (html.match(/(<iframe)(.*?)(youtu.be\/|youtube(-nocookie)?.com\/(v\/|.*u\/\w\/|embed\/|.*v=))(.*?)(<\/iframe>)/gi) || []).length;
if (youtubeCount) {
components.push('<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>');
}
if (iframeCount > youtubeCount) {
components.push('<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>');
}

7
core/frontend/apps/amp/lib/helpers/amp_content.js
View file

@ -36,8 +36,8 @@ allowedAMPTags = ['html', 'body', 'article', 'section', 'nav', 'aside', 'h1', 'h
'table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td',
'th', 'button', 'noscript', 'acronym', 'center', 'dir', 'hgroup', 'listing',
'multicol', 'nextid', 'nobr', 'spacer', 'strike', 'tt', 'xmp', 'amp-img',
'amp-video', 'amp-ad', 'amp-embed', 'amp-anim', 'amp-iframe', 'amp-pixel',
'amp-audio', 'O:P'];
'amp-video', 'amp-ad', 'amp-embed', 'amp-anim', 'amp-iframe', 'amp-youtube',
'amp-pixel', 'amp-audio', 'O:P'];
allowedAMPAttributes = {
'*': ['itemid', 'itemprop', 'itemref', 'itemscope', 'itemtype', 'accesskey', 'class', 'dir', 'draggable',
@ -110,7 +110,8 @@ allowedAMPAttributes = {
'amp-anim': ['media', 'noloading', 'alt', 'attribution', 'placeholder', 'src', 'srcset', 'width', 'height', 'layout'],
'amp-audio': ['src', 'width', 'height', 'autoplay', 'loop', 'muted', 'controls'],
'amp-iframe': ['src', 'srcdoc', 'width', 'height', 'layout', 'frameborder', 'allowfullscreen', 'allowtransparency',
'sandbox', 'referrerpolicy']
'sandbox', 'referrerpolicy'],
'amp-youtube': ['src', 'width', 'height', 'layout', 'frameborder', 'autoplay', 'loop', 'data-videoid', 'data-live-channelid']
};
function getAmperizeHTML(html, post) {

32
core/test/unit/apps/amp/amp_components_spec.js
View file

@ -32,6 +32,38 @@ describe('{{amp_components}} helper', function () {
rendered.should.match(/<script async custom-element="amp-iframe" src="https:\/\/cdn.ampproject.org\/v0\/amp-iframe-0.1.js"><\/script>/);
});
it('adds script tag for a youtube embed', function () {
var post = {
html: '<iframe src="https://www.youtube.com/embed/zqNTltOGh5c" frameborder="0"></iframe>'
},
rendered;
rendered = ampComponentsHelper.call(
{relativeUrl: '/post/amp/', safeVersion: '0.3', context: ['amp', 'post'], post: post},
{data: {root: {context: ['amp', 'post']}}});
should.exist(rendered);
rendered.should.match(/<script async custom-element="amp-youtube" src="https:\/\/cdn.ampproject.org\/v0\/amp-youtube-0.1.js"><\/script>/);
});
it('adds scripts for youtube embeds and iframes', function () {
var post = {
html: `
<iframe src="https://www.youtube.com/embed/zqNTltOGh5c" frameborder="0"></iframe>
<iframe src="//giphy.com/embed/o0vwzuFwCGAFO" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
`
},
rendered;
rendered = ampComponentsHelper.call(
{relativeUrl: '/post/amp/', safeVersion: '0.3', context: ['amp', 'post'], post: post},
{data: {root: {context: ['amp', 'post']}}});
should.exist(rendered);
rendered.should.match(/<script async custom-element="amp-youtube" src="https:\/\/cdn.ampproject.org\/v0\/amp-youtube-0.1.js"><\/script>/);
rendered.should.match(/<script async custom-element="amp-iframe" src="https:\/\/cdn.ampproject.org\/v0\/amp-iframe-0.1.js"><\/script>/);
});
it('adds script tag for an audio tag', function () {
var post = {
html: '<audio src="myaudiofile.mp3"/>'