Help us understand the problem. What is going on with this article?

Qiitaに何が埋め込められるか

More than 1 year has passed since last update.

Qiitaに外部サイトやSNSが埋め込められるか検証してみたい。

Codepenの<iframe>

埋め込みコード
<iframe height='265' scrolling='no' title='Babel practice 1' src='//codepen.io/i_ryo/embed/GvzKYK/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/i_ryo/pen/GvzKYK/'>Babel practice 1</a> by イイダリョウ (<a href='https://codepen.io/i_ryo'>@i_ryo</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

結果

Codepenの<p>

埋め込みコード
<p data-height="265" data-theme-id="0" data-slug-hash="GvzKYK" data-default-tab="html,result" data-user="i_ryo" data-embed-version="2" data-pen-title="Babel practice 1" class="codepen">See the Pen <a href="https://codepen.io/i_ryo/pen/GvzKYK/">Babel practice 1</a> by イイダリョウ (<a href="https://codepen.io/i_ryo">@i_ryo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

結果

See the Pen Babel practice 1 by イイダリョウ (@i_ryo) on CodePen.


Youtubeの<iframe>

埋め込みコード
<iframe width="560" height="315" src="https://www.youtube.com/embed/vJVZ3PsXqYI" frameborder="0" allowfullscreen></iframe>

結果

Youtubeの共有タグ

埋め込みコード
https://youtu.be/vJVZ3PsXqYI

結果
https://youtu.be/vJVZ3PsXqYI

Soundcloudの<iframe>

埋め込みコード
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/283498610&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

結果

Instagram

埋め込みコード
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" 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:658px; 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/BYeb9y2le6o/" 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">上から見るか #陸橋 #遠近感 #crossover #Perspective</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;">イイダリョウさん(@idr_zz)がシェアした投稿 - <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-08-31T22:51:17+00:00">2017 8月 31 3:51午後 PDT</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

結果

上から見るか #陸橋 #遠近感 #crossover #Perspective

イイダリョウさん(@idr_zz)がシェアした投稿 - 2017 8月 31 3:51午後 PDT


Twitter

埋め込みコード
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Qiitaは外部サイトの埋め込みはできるのだろうか、実験中。</p>&mdash; イイダリョウ (@idr_zz) <a href="https://twitter.com/idr_zz/status/904361074413101057">2017年9月3日</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

結果

Facebook

埋め込みコード
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fidr.zzz%2Fposts%2F1934756040073543&width=500" width="500" height="479" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

結果

結論

<iframe>の埋め込みができないと言うこと?
とも思ったが、Instagramは<blockquote>だが表示されなかった。
Twitterのみが埋め込み表示になった。
Codepenは是非埋め込みたいものだが方法はないものだろうか…

※2018/01/17からQiitaでCodePenが埋め込めるようになりました!
本記事の「CodePenのp」も表示されていますね。喜ばしいです。
https://qiita.com/Qiita/items/edae7417214c8e957f54

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away