GV Test Post: Embeds

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

Georgia's youth protesters lead 2020's political showdown

WP Embed shortcode+URL with Translation

Georgia's youth protesters lead 2020's political showdown

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

¿Jamüsü naa’in naa wayuukana ataralüikana wanaa sümaa nekerotüin sulu’u tü sukua’ipaka tijitaatka? ¿Kasawayuu kapüleeka otta kasa alateetka maka nnojorülee pütchi eekai achiaain saa’ujee?

Posted by Global Voices on Monday, January 30, 2023

Facebook Post with blockquote.translation

¿Jamüsü naa’in naa wayuukana ataralüikana wanaa sümaa nekerotüin sulu’u tü sukua’ipaka tijitaatka? ¿Kasawayuu kapüleeka otta kasa alateetka maka nnojorülee pütchi eekai achiaain saa’ujee?

Posted by Global Voices on Monday, January 30, 2023

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

Fish Are Dying Mysteriously in Vietnam

One of our most-viewed posts of 2016: "Millions of fish are dying in Vietnam. Locals blame the Formosa Hà Tĩnh Steel Corporation."

Posted by Global Voices on Monday, January 2, 2017

Facebook Video with blockquote.translation

Fish Are Dying Mysteriously in Vietnam

One of our most-viewed posts of 2016: "Millions of fish are dying in Vietnam. Locals blame the Formosa Hà Tĩnh Steel Corporation."

Posted by Global Voices on Monday, January 2, 2017

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)

Tweet embed (blockquote) followed by blockquote.translation

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

Tweet Embed by URL with blockquote.translation

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

♬ Stories 2 – Danilo Stankovic

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

♬ Stories 2 – Danilo Stankovic

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

https://www.tumblr.com/globalvoices/157945851862/walking-on-death-along-the-iraqi-border

 

Tumblr URL Embed followed by blockquote.translation

https://www.tumblr.com/globalvoices/157945851862/walking-on-death-along-the-iraqi-border

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.

Start the conversation

Authors, please log in »

Guidelines

  • Please treat others with respect. Comments containing hate speech, obscenity, and personal attacks will not be approved.