react-oembed-container
Version:
React container for locating and injecting oembed scripts in string content.
198 lines (174 loc) • 19.7 kB
JavaScript
export const facebook = `<h2>Facebook</h2>
<figure class="wp-block-embed-facebook wp-block-embed is-type-rich is-provider-facebook">
<div class="wp-block-embed__wrapper">
<div id="fb-root"></div>
<script async="1" defer="1" crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>
<div class="fb-post" data-href="https://www.facebook.com/WordPress/posts/10157864027952911" data-width="490">
<blockquote cite="https://www.facebook.com/WordPress/posts/10157864027952911" class="fb-xfbml-parse-ignore">
<p>February 2020 was a busy month in the WordPress project! Most notably, there was an outpouring of sentiment in response…</p>
Posted by <a href="https://www.facebook.com/WordPress/">WordPress</a> on <a href="https://www.facebook.com/WordPress/posts/10157864027952911">Monday, March 2, 2020</a>
</blockquote>
</div>
</div>
</figure>
<figure class="wp-block-embed-facebook wp-block-embed is-type-video is-provider-facebook">
<div class="wp-block-embed__wrapper">
<div id="fb-root"></div>
<script async="1" defer="1" crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>
<div class="fb-video" data-href="https://www.facebook.com/react/videos/930567940354947" data-width="490">
<blockquote cite="https://www.facebook.com/react/videos/930567940354947/" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/react/videos/930567940354947/"></a>
<p>ReactConf 2016 – Nick SchrockKeynote</p>
Posted by <a href="https://www.facebook.com/react/">React</a> on Tuesday, March 1, 2016
</blockquote>
</div>
</div>
</figure>
`;
export const twitter = `<h2>Twitter</h2>
<blockquote class="twitter-tweet" data-width="525" data-dnt="true">
<p lang="en" dir="ltr"><a href="https://t.co/oGBBWZALr0">https://t.co/oGBBWZALr0</a></p>
<p>Mark you calendars, JSConf US is back! August 21-23, 2018</p>
<p>More details to come soon!</p>
<p>Want to be a sponsor? Let us know: <a href="https://t.co/hvuQfRE1aL">https://t.co/hvuQfRE1aL</a></p>
<p>— JSConf US (@JSConfUS) <a href="https://twitter.com/JSConfUS/status/953310891595898880?ref_src=twsrc%5Etfw">January 16, 2018</a></p></blockquote>
<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
`;
export const wordpress = `<h2>WordPress</h2>
<blockquote class="wp-embedded-content" data-secret="htb8BLIJOJ"><p><a href="https://wordpress.org/news/2018/02/the-month-in-wordpress-january-2018/">The Month in WordPress: January 2018</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://wordpress.org/news/2018/02/the-month-in-wordpress-january-2018/embed/#?secret=htb8BLIJOJ" data-secret="htb8BLIJOJ" width="525" height="296" title="“The Month in WordPress: January 2018” — WordPress News" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
`;
export const youtube = `<h2>Youtube</h2>
<p><iframe width="525" height="394" src="https://www.youtube.com/embed/HN2mE3qAZto?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
<p><iframe width="525" height="295" src="https://www.youtube.com/embed/47LJ-H-Jeic?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
`;
export const vimeo = `<h2>Vimeo</h2>
<p><iframe src="https://player.vimeo.com/video/50571510" width="525" height="397" frameborder="0" title="Timelapse Drawing - Network Map" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></p>
<p><iframe src="https://player.vimeo.com/video/7469697" width="525" height="315" frameborder="0" title="Star Guitar" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></p>
`;
export const tumblr = `<h2>Tumblr</h2>
<div class="tumblr-post" data-href="https://embed.tumblr.com/embed/post/eBnQ22h9pL4qsxK1y-6bUw/153666878438" data-did="da39a3ee5e6b4b0d3255bfef95601890afd80709" ><a href="http://1041uuu.tumblr.com/post/153666878438">http://1041uuu.tumblr.com/post/153666878438</a></div>
<p><script async src="https://assets.tumblr.com/post.js"></script></p>
<div class="tumblr-post" data-href="https://embed.tumblr.com/embed/post/eBnQ22h9pL4qsxK1y-6bUw/144754421268" data-did="da39a3ee5e6b4b0d3255bfef95601890afd80709" ><a href="http://1041uuu.tumblr.com/post/144754421268">http://1041uuu.tumblr.com/post/144754421268</a></div>
<p><script async src="https://assets.tumblr.com/post.js"></script></p>
<div class="tumblr-post" data-href="https://embed.tumblr.com/embed/post/BWnej2_rWH3uuEISvImfXA/169705197407" data-did="8690234c1580f70ebbb7ba9c65fdb228c72ec008" ><a href="http://itsamap.tumblr.com/post/169705197407/yesterdays-sketchbook-at-lower-manhattan">http://itsamap.tumblr.com/post/169705197407/yesterdays-sketchbook-at-lower-manhattan</a></div>
<p><script async src="https://assets.tumblr.com/post.js"></script></p>
`;
export const instagram = `<h2>Instagram</h2>
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BdI8IfCHAhi/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:525px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
<div style="padding:8px;">
<div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;">
<div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div>
</div>
<p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BdI8IfCHAhi/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Happy Holidays! #NYC</a></p>
<p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by <a href="https://www.instagram.com/kadamwhite/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> K.Adam White</a> (@kadamwhite) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-12-25T21:06:03+00:00">Dec 25, 2017 at 1:06pm PST</time></p>
</div>
</blockquote>
<p><script async defer src="//www.instagram.com/embed.js"></script></p>
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BX6f_amDLu4/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:525px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
<div style="padding:8px;">
<div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:41.75925925925926% 0; text-align:center; width:100%;">
<div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div>
</div>
<p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BX6f_amDLu4/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Fire on the mountain</a></p>
<p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by <a href="https://www.instagram.com/kadamwhite/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> K.Adam White</a> (@kadamwhite) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-08-17T23:53:48+00:00">Aug 17, 2017 at 4:53pm PDT</time></p>
</div>
</blockquote>
<p><script async defer src="//www.instagram.com/embed.js"></script></p>
`;
export const mixcloud = `<h2>Mixcloud</h2>
<p><iframe width="525" height="788" src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2F538dancedepartment%2Fthe-best-of-dance-department-514-with-special-guest-hannah-wants%2F&hide_cover=1" frameborder="0"></iframe></p>
`;
export const spotify = `<h2>Spotify</h2>
<p><iframe src="https://open.spotify.com/embed/album/4feuiarnQRyex4EFsQPyuG" width="300" height="380" frameborder="0" allowtransparency="true"></iframe></p>
<p><iframe src="https://open.spotify.com/embed/track/3bUNyRrTFJDd4mqvUcb1Aa" width="300" height="380" frameborder="0" allowtransparency="true"></iframe></p>
`;
export const soundcloud = `<h2>Soundcloud</h2>
<p><iframe width="525" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F366011944&show_artwork=true&maxwidth=525&maxheight=788&dnt=1"></iframe></p>
<p><iframe width="525" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F346743803&show_artwork=true&maxwidth=525&maxheight=788&dnt=1"></iframe></p>
`;
export const ted = `<h2>TED</h2>
<p><iframe src="https://embed.ted.com/talks/joy_buolamwini_how_i_m_fighting_bias_in_algorithms" width="525" height="296" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
`;
export const kickstarter = `<h2>Kickstarter</h2>
<p><iframe src="https://www.kickstarter.com/projects/pixeljam/the-dino-run-2-exploratory-campaign/widget/video.html" height="295.3125" width="525" frameborder="0" scrolling="no"></iframe></p>
`;
export const meetup = `<h2>Meetup</h2>
<style type="text/css">#meetup_oembed .mu_clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }* html #meetup_oembed .mu_clearfix, *:first-child+html #meetup_oembed .mu_clearfix { zoom: 1; }#meetup_oembed { background:#eee;border:1px solid #ccc;padding:10px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; }#meetup_oembed h3 { font-weight:normal; margin:0 0 10px; padding:0; line-height:26px; font-family:Georgia,Palatino,serif; font-size:24px }#meetup_oembed p { margin: 0 0 10px; padding:0; line-height:16px; }#meetup_oembed img { border:none; margin:0; padding:0; }#meetup_oembed a, #meetup_oembed a:visited, #meetup_oembed a:link { color: #1B76B3; text-decoration: none; cursor: hand; cursor: pointer; }#meetup_oembed a:hover { color: #1B76B3; text-decoration: underline; }#meetup_oembed a.mu_button { font-size:14px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:2px solid #A7241D;color:white;text-decoration:none;background-color: #CA3E47; background-image: -moz-linear-gradient(top, #ca3e47, #a8252e); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #a8252e), color-stop(1, #ca3e47));disvplay:inline-block;padding:5px 10px; }#meetup_oembed a.mu_button:hover { color: #fff; text-decoration: none; }#meetup_oembed .photo { width:50px; height:50px; overflow:hidden;background:#ccc;float:left;margin:0 5px 0 0;text-align:center;padding:1px; }#meetup_oembed .photo img { height:50px }#meetup_oembed .number { font-size:18px; }#meetup_oembed .thing { text-transform: uppercase; color: #555; }</style>
<div id="meetup_oembed" style="height:179px">
<div style="overflow:hidden;max-height:139px">
<h3>QueensJS</h3>
<p style="margin:0 0 10px;font-size:12px;line-height:16px;">Astoria, NY <br /> <span style="font-size:14px;font-weight:bold;">1,190</span> <em>Hot Takes</em></p>
<p style="line-height:16px">Do you have a love for JavaScript? Do you want to hear people talk about JavaScript? Do you want to converse with others who know or are learning… JavaScript? Then Queens JS i…</p>
</p></div>
<p style="margin:10px 0 5px;"><a href="https://www.meetup.com/QueensJS/" target="_blank" class="mu_button">Check out this Meetup Group →</a></p>
</div>
<style type="text/css">#meetup_oembed .mu_clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }* html #meetup_oembed .mu_clearfix, *:first-child+html #meetup_oembed .mu_clearfix { zoom: 1; }#meetup_oembed { background:#eee;border:1px solid #ccc;padding:10px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; }#meetup_oembed h3 { font-weight:normal; margin:0 0 10px; padding:0; line-height:26px; font-family:Georgia,Palatino,serif; font-size:24px }#meetup_oembed p { margin: 0 0 10px; padding:0; line-height:16px; }#meetup_oembed img { border:none; margin:0; padding:0; }#meetup_oembed a, #meetup_oembed a:visited, #meetup_oembed a:link { color: #1B76B3; text-decoration: none; cursor: hand; cursor: pointer; }#meetup_oembed a:hover { color: #1B76B3; text-decoration: underline; }#meetup_oembed a.mu_button { font-size:14px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:2px solid #A7241D;color:white;text-decoration:none;background-color: #CA3E47; background-image: -moz-linear-gradient(top, #ca3e47, #a8252e); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #a8252e), color-stop(1, #ca3e47));disvplay:inline-block;padding:5px 10px; }#meetup_oembed a.mu_button:hover { color: #fff; text-decoration: none; }#meetup_oembed .photo { width:50px; height:50px; overflow:hidden;background:#ccc;float:left;margin:0 5px 0 0;text-align:center;padding:1px; }#meetup_oembed .photo img { height:50px }#meetup_oembed .number { font-size:18px; }#meetup_oembed .thing { text-transform: uppercase; color: #555; }</style>
<div id="meetup_oembed" style="height:318px">
<div style="max-height:278px;overflow:hidden">
<h3> love.js – February BostonJS Meetup</h3>
<p style="margin:5px 0;font-size:16px">Tuesday, Feb 20, 2018, 6:30 PM</p>
<p style="margin: 0 0 5px;"><span style="font-size:14px">Appcues</span><br /><span style="font-size:12px;">54 Canal St. Boston, MA</span></p>
<p> <span style="color:#4F8A10;font-size:16px;">58 JavaScripters Attending</span> </p>
<div style="margin:5px 0 10px" class="mu_clearfix">
<div class="photo"><img src="https://secure.meetupstatic.com/photos/member/d/1/f/9/thumb_261293753.jpeg" /></div>
<div class="photo"><img src="https://secure.meetupstatic.com/photos/member/6/4/f/e/thumb_269485854.jpeg" /></div>
<div class="photo"><img src="https://secure.meetupstatic.com/photos/member/c/b/2/b/thumb_271012011.jpeg" /></div>
<div class="photo"><img src="https://secure.meetupstatic.com/photos/member/4/4/2/8/thumb_256697448.jpeg" /></div>
<div class="photo"><img src="https://secure.meetupstatic.com/photos/member/8/e/b/6/thumb_262296534.jpeg" /></div>
<div class="photo"><img src="https://secure.meetupstatic.com/photos/member/d/9/1/a/thumb_267115578.jpeg" /></div>
<div class="photo"><img src="https://secure.meetupstatic.com/photos/member/5/1/8/a/thumb_271040874.jpeg" /></div>
<div class="photo"><img src="https://secure.meetupstatic.com/photos/member/5/a/d/6/thumb_274163254.jpeg" /></div>
</p></div>
<p style="line-height:16px">This meetup, scheduled for 2/13, has been postponed due to organizer illness. We are working to confirm a new date for next week and will email you with any updates. This Valentine’s day, we’re celebrating what we love about JavaScript! Come hangout with the BostonJS community for our first meetup of 2018, say hi, and share what you love about Java…</p>
</p></div>
<p style="margin:10px 0 0;"><a href="https://www.meetup.com/boston_JS/events/247096541/" target="_blank" class="mu_button"><strong>Check out this Meetup →</strong></a></p>
</div>
`;
export const reddit = `<h2>Reddit</h2>
<blockquote class="reddit-card" ><p> <a href="https://www.reddit.com/r/vuejs/comments/7xa1gr/vuetify_v10_has_been_released/?ref_source=embed&ref=share">Vuetify v1.0 has been released!</a> from <a href="https://www.reddit.com/r/vuejs/">vuejs</a> </p></blockquote>
<p> <script async src="https://embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script></p>
`;
export const wordpresstv = `<h2>WordPress.tv</h2>
<p><iframe width='525' height='295' src='https://videopress.com/embed/AvC6H2JI?hd=0' frameborder='0' allowfullscreen></iframe><script src='https://v0.wordpress.com/js/next/videopress-iframe.js?m=1435166243'></script></p>
`;
export const issuu = `<h2>Issuu</h2>
<div data-url="https://issuu.com/crackmagazine/docs/issuu-76" style="width: 525px; height: 331px;" class="issuuembed"></div>
<p><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script></p>
<div data-url="https://issuu.com/columbiaup/docs/aloi_excerpt" style="width: 525px; height: 394px;" class="issuuembed"></div>
<p><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script></p>
`;
export const flickr = `<h2>Flickr</h2>
<p><a href="https://www.flickr.com/photos/kadamwhite/21958804054/"><img src="https://farm1.staticflickr.com/621/21958804054_af2a347efa.jpg" alt="Quincy Market Autumn" width="500" height="370" /></a></p>
`;
export const trello = `<h2>Trello</h2>
<blockquote class="trello-card">
<a href="https://trello.com/c/XryMRaxw/14-hi-read-me-first">Hi! Read me first!</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>
`;
export const twitch = `<h2>Twitch</h2>
<iframe src="https://player.twitch.tv/?channel=boilerroom" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
<a href="https://www.twitch.tv/boilerroom?tt_content=text_link&tt_medium=live_embed" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px; text-decoration:underline;">Watch live video from BoilerRoom on www.twitch.tv</a>
`;
export const all = [
facebook,
twitter,
wordpress,
youtube,
vimeo,
tumblr,
instagram,
mixcloud,
spotify,
soundcloud,
ted,
kickstarter,
meetup,
reddit,
wordpresstv,
issuu,
flickr,
trello,
twitch,
].join( '\n\n' );