GV Test Post: Embeds
See also: Guidelines for embed use in Global Voices Posts.
Other test posts: Formats, Shortcodes
This is a demo article that includes all of the social media embeds supported by GV, and in the various ways we support using them. Specifically, it tries to demonstrate how they look with a translation quote immediately following them, since that is a common use case.
To see this post with the “Extra-wide” layout add /?gv_extra_wide=1 to the end of the URL.
WordPress Embed Tests
Embeds below work on both normal and AMP sites.
Note that something weird about the rendering of amp-wordpress-embed in AMP means we can't add a bottom margin or it collapses in a weird way. Just let it go, rarely used anyway.
WP Embed shortcode+URL
WP Embed shortcode+URL with Translation
This is a translation of the WordPress embed above.
The blockquote should be pushed up against the embed to indicate it's a translation, but isn't perfect on AMP because we can't control the margin as described above.
Facebook Embed Tests
Embeds below work on both normal and AMP sites.
Facebook Post with embed shortcode and URL
Facebook Post with blockquote.translation
This is a translation of the facebook post embed above.
The blockquote should be pushed up against the embed above to indicate it's a translation in both normal and AMP modes.
Facebook Video with embed shortcode and URL
Facebook Video with blockquote.translation
This is a translation of the facebook video embed above.
The blockquote should be pushed up against the embed above to indicate it's a translation in both normal and AMP modes.
Facebook raw embed code
Facebook raw embed codes below also work in normal and AMP sites, but aren't as responsive as the URL embed version.
Note: The .translation version won't have proper spacing due to empty <p>. See gv_footerjs_facebook_embed_classes()
Facebook raw embed with Blockquote
This is a translation of the raw Facebook embed above.
Instagram Embeds
Embeds below work on both normal and AMP sites. Note that the spacing below the emebed on AMP is horrible because amp-instagram is wrapped in a <p> tag. See the bug report on Github.
Instagram URL in Embed shortcode
Instagram URL in Embed shortcode with .translation
This is a translation of the Instagram post above.
The blockquote should be pushed up against the embed above to indicate it's a translation. The spacing is all wrong in AMP because of the wonky extra space at the bottom of Instagram embeds.
Instagram embed with hidecaption="1"
The embed below should not have a caption displayed. Note this doesn't work in AMP.
Twitter Embeds
Embeds below work on both normal and AMP sites.
Tweet embed (blockquote)
Facebook Instant Articles doesn't allow horizontal rules because lines are dangerous and need to be kept under control.
— jeremyclarke (@jeremyclarke) February 1, 2017
Tweet embed (blockquote) followed by blockquote.translation
Facebook Instant Articles doesn't allow horizontal rules because lines are dangerous and need to be kept under control.
— jeremyclarke (@jeremyclarke) February 1, 2017
This is a translation of the Twitter blockquote embed above.
The blockquote should be pushed up against the embed above to indicate it's a translation in both normal and AMP modes.
Tweet Embed by URL
Facebook Instant Articles doesn't allow horizontal rules because lines are dangerous and need to be kept under control.
— jer clarke 🌿 𝓉𝒽𝑒𝓎 (@jerclarke) February 1, 2017
Tweet Embed by URL with blockquote.translation
Facebook Instant Articles doesn't allow horizontal rules because lines are dangerous and need to be kept under control.
— jer clarke 🌿 𝓉𝒽𝑒𝓎 (@jerclarke) February 1, 2017
This is a translation of the Twitter URL embed above.
The blockquote should be pushed up against the embed above to indicate it's a translation in both normal and AMP modes.
Mastodon Embeds
Embeds below work on both normal and AMP sites.
Mastodon embed (iframe)
Mastodon embed (iframe) followed by blockquote.translation
Note: We can't fix the space between the embed and the quote because the iframe ends up inside a p.
This is a translation of the Mastodon iframe embed above.
The blockquote should be pushed up against the embed above to indicate it's a translation. The spacing below the embed is always wrong becuase it ends up wrapped in a <p> tag. See the bug report on WP AMP Github.
Tiktok Embeds
Tiktok embeds should work in both normal and AMP versions of the site.
Tiktok URL Embed
@adventureul This is the cutest thing you’ll see all day 🥺🎥Contentbible #animals #animalsoftiktok #penguins #cute #travel #animalstok #wholesome
Tiktok URL Embed followed by blockquote.translation
@adventureul This is the cutest thing you’ll see all day 🥺🎥Contentbible #animals #animalsoftiktok #penguins #cute #travel #animalstok #wholesome
This is a translation of the Tiktok embed above.
The blockquote should be pushed up against the embed above to indicate it's a translation.
Tumblr Embeds
Tumblr embeds should work in both normal and AMP versions of the site.
Tumblr URL Embed
Tumblr URL Embed followed by blockquote.translation
This is a translation of the Tumblr embed above.
The blockquote should be pushed up against the embed above to indicate it's a translation in both normal and AMP modes.
YouTube Embeds
YouTube embeds should work in both normal and AMP versions of the site.
YouTube Embed by URL
YouTube Embed by URL with translation
This is a translation of the YouTube video above.
The blockquote should be pushed up against the embed above to indicate it's a translation. The spacing below the embed on AMP is wrong because amp-youtube is wrapped in a <p> tag. See the bug report on Github.
Soundcloud Embeds
Soundcloud embeds should work in both normal and AMP versions of the site.
Soundcloud Embed by URL
Soundcloud Embed by URL with translation
This is a translation of the Soundcloud embed above.
The blockquote should be pushed up against the embed above to indicate it's a translation. The spacing below the embed on AMP is wrong because amp-youtube is wrapped in a <p> tag. See the bug report on Github.
Video raw upload embeds
Raw video embeds with [video] should work properly in both regular and AMP versions.
HTML5 Video Tag From Upload
HTML5 Video Tag From Upload followed by blockquote.translation
This is a translation of the embedded video above.