remark-oembed
Version:
Converts URLs surrounded by newlines into embeds that are loaded asynchronously
304 lines (302 loc) • 9.32 kB
HTML
<div class="remark-oembed-inline remark-oembed-code-pen" data-oembed>
<iframe
id="cp_embed_oNjxrZa"
src="https://codepen.io/fossheim/embed/preview/oNjxrZa?height=300&slug-hash=oNjxrZa&default-tabs=css,result&host=https://codepen.io"
title="macintosh.css"
scrolling="no"
frameborder="0"
height="300"
allowtransparency="true"
class="cp_embed_iframe"
style="width: 100%; overflow: hidden"
></iframe>
</div>
<div class="remark-oembed-inline remark-oembed-codepoints-net" data-oembed>
<iframe
src="https://codepoints.net/U+003D?embed"
style="width: 640px; height: 640px; border: 1px solid #444"
></iframe>
</div>
<div class="remark-oembed-inline remark-oembed-code-sandbox" data-oembed>
<iframe
width="1000"
height="500"
src="https://codesandbox.io/embed/j0y0vpz59"
style="
width: 1000px;
height: 500px;
border: 0;
border-radius: 4px;
overflow: hidden;
"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
</div>
<div class="remark-oembed-inline remark-oembed-flickr" data-oembed>
<a
data-flickr-embed="true"
href="https://www.flickr.com/photos/pedrocaetano/27432477888/"
title="Leiria by night by Pedro Nuno Caetano, on Flickr"
><img
src="https://live.staticflickr.com/872/27432477888_8236c59e1d_b.jpg"
width="1024"
height="678"
alt="Leiria by night"
/></a>
<script
async
src="https://embedr.flickr.com/assets/client-code.js"
charset="utf-8"
></script>
</div>
<p>
https://www.gettyimages.pt/detail/fotografia-de-not%C3%ADcias/monastery-of-batalha-in-portugal-fotografia-de-not%C3%ADcias
</p>
<div class="remark-oembed-inline remark-oembed-gfycat" data-oembed>
<div style="position: relative; padding-bottom: calc(75% + 44px)">
<iframe
src="https://gfycat.com/ifr/imaginativefeistyhalicore"
frameborder="0"
scrolling="no"
width="100%"
height="100%"
style="position: absolute; top: 0; left: 0"
allowfullscreen
></iframe>
</div>
</div>
<a
href="https://giphy.com/gifs/i79P9wUfnmPyo"
class="remark-oembed-anchor"
data-oembed
rel="noopener noreferrer nofollow"
target="_blank"
><img
src="https://media1.giphy.com/media/i79P9wUfnmPyo/giphy.gif"
data-src="https://media1.giphy.com/media/i79P9wUfnmPyo/giphy.gif"
title="The Office Yes GIF - Find & Share on GIPHY"
width="480"
height="270"
class="remark-oembed-photo"
data-oembed
/></a>
<p>https://www.ifixit.com/Device/MacBook_Pro_13%22_Retina_Display_Early_2015</p>
<div class="remark-oembed-inline remark-oembed-i-heart-radio" data-oembed>
<iframe
title="Office Ladies"
height="300"
width="100%"
src="https://www.iheart.com/podcast/867-office-ladies-49346942/?embed=true&cid=oembed&keyid%255B0%255D=Office%2520Ladies&sc=podcast_widget"
allow="autoplay"
frameborder="0"
></iframe>
</div>
<p>
https://www.kickstarter.com/projects/flairespresso/the-neo-delicious-affordable-espresso-at-home?ref=discovery_staff_picks_popular
</p>
<div class="remark-oembed-inline remark-oembed-meetup" data-oembed>
<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: 389px">
<div style="overflow: hidden; max-height: 349px">
<h3>require('lx')</h3>
<p style="margin: 0 0 10px; font-size: 12px; line-height: 16px">
Lisbon, PT <br />
<span style="font-size: 14px; font-weight: bold">2,262</span>
<em>JavaScripter</em>
</p>
<a href="https://www.meetup.com/require-lx/" target="_blank"
><img
src="https://secure.meetupstatic.com/photos/event/d/a/0/e/600_323635822.jpeg"
style="float: right; max-width: 150px; margin-right: 0"
/></a>
<div style="margin-right: 170px; line-height: 16px">
A meetup group for JavaScript developers, lovers, enthusiasts and
explorers in Lisbon. Server-side and client-side. Talks and code shows,
some day even hackathons.
</div>
<p style="font-size: 16px; margin: 10px 0 5px; line-height: 18px">
Next Meetup
</p>
<p style="margin-bottom: 2px; line-height: 16px; font-size: 14px">
<a
title="Require ('LX') Spring Edition - Micro-Frontends with Module Federation"
href="https://www.meetup.com/require-lx/events/276970752/"
target="_blank"
>Require ('LX') Spring Edition - Micro-Frontends with Module ...</a
>
</p>
<p style="line-height: 18px">
Wednesday, Mar 31, 2021, 6:30 PM<br />
<span style="color: #4f8a10">45 Attending</span>
</p>
</div>
<p style="margin: 10px 0 5px">
<a
href="https://www.meetup.com/require-lx/"
target="_blank"
class="mu_button"
>Check out this Meetup Group →</a
>
</p>
</div>
</div>
<div class="remark-oembed-inline remark-oembed-reddit" data-oembed>
<blockquote class="reddit-card">
<a
href="https://www.reddit.com/r/programming/comments/91i0mc/youtube_page_load_is_5x_slower_in_firefox_and/?ref_source=embed&ref=share"
>YouTube page load is 5x slower in Firefox and Edge than in Chrome because
YouTube's Polymer redesign relies on the deprecated Shadow DOM v0 API only
implemented in Chrome.</a
>
from
<a href="https://www.reddit.com/r/programming/">programming</a>
</blockquote>
<script
async
src="https://embed.redditmedia.com/widgets/platform.js"
charset="UTF-8"
></script>
</div>
<div class="remark-oembed-inline remark-oembed-sapo-videos" data-oembed>
<iframe
src="//rd.videos.sapo.pt/playhtml?file=https://rd.videos.sapo.pt/EhJE6LlHZfFz4m8HZ2o5/mov/1&quality=sd"
frameborder="0"
scrolling="no"
width="480"
height="360"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
</div>
<div class="remark-oembed-inline remark-oembed-sound-cloud" data-oembed>
<iframe
width="100%"
height="450"
scrolling="no"
frameborder="no"
src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F948027949&show_artwork=true"
></iframe>
</div>
<div class="remark-oembed-inline remark-oembed-spotify" data-oembed>
<iframe
width="300"
height="380"
allowtransparency="true"
frameborder="0"
allow="encrypted-media"
title="Spotify Embed: Big Bites"
src="https://open.spotify.com/embed/album/294xONWdhATOenx5i2nZIE"
></iframe>
</div>
<p>https://www.twitch.tv/landonorris</p>
<p>http://www.twitter.com/ramitos</p>
<p></p>
<div class="remark-oembed-inline remark-oembed-you-tube" data-oembed>
<iframe
width="200"
height="113"
src="https://www.youtube.com/embed/aoLhACqJCUg?feature=oembed"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>