如何从嵌入式社交媒体帖子中删除边框？答案

【问题标题】：How to remove border from embedded social media posts?如何从嵌入式社交媒体帖子中删除边框？
【发布时间】：2020-10-08 00:30:32
【问题描述】：

虽然我很欣赏这个问题时不时出现，但到目前为止，我已经仔细研究了每一个我能得到的回复，但没有任何运气。所以，我决定开一个新的线程......

我正在尝试将 LinkedIn 帖子嵌入到网页中，无论我在边框宽度等方面进行什么尝试，嵌入的帖子周围总是有一个浅灰色的框架。嵌入 Facebook 帖子和推文时会出现相同的边框。我的印象是，这些平台上的原始帖子都有浅灰色的边框，所以嵌入式版本也会有。我想知道是否有任何不涉及重写整个社交媒体体验的解决方法。

感谢您的帮助。请参阅下面的示例代码。


<!-- YouTube iframe version below -->

<iframe width="560" height="315" src="https://www.youtube.com/embed/mhrkdHshb3E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


<!-- Twitter js version below -->

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">More than 100 spacecraft have been signed up to fly on Falcon 9 since we launched the rideshare program. Small satellite operators can book their ride to orbit online → <a href="https://www.spacex.com/rideshare/index.html">https://www.spacex.com/rideshare/index.html</a> <a href="https://twitter.com/spaceflightinc/status/1273347941105795072">https://twitter.com/spaceflightinc/status/1273347941105795072</a></p>&mdash; SpaceX (@SpaceX) <a href="https://twitter.com/SpaceX/status/1273426202188005377?ref_src=twsrc%5Etfw">June 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<!-- facebook iframe version below -->

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FNASA%2Fphotos%2Fa.67899501771%2F10158346617536772%2F&show_text=true&width=552&height=458&appId" width="552" height="458" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

<!-- facebook js version below -->

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="6zFKXsAI"></script>

<div class="fb-post" data-href="https://www.facebook.com/NASA/photos/a.67899501771/10158346617536772/" data-show-text="true" data-width=""><blockquote cite="https://developers.facebook.com/NASA/photos/a.67899501771/10158346617536772/?type=3" class="fb-xfbml-parse-ignore"><p>Astronomers are used to studying celestial objects that are millions or even billions of years old. That’s why a...</p>Posted by <a href="https://www.facebook.com/NASA/">NASA - National Aeronautics and Space Administration</a> on&nbsp;<a href="https://developers.facebook.com/NASA/photos/a.67899501771/10158346617536772/?type=3">Wednesday, June 17, 2020</a></blockquote></div> 


<!-- LinkedIn iframe version below -->

<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:6674757258863222784" height="209" width="504" frameborder="0" allowfullscreen="" title="Embedded post"></iframe>

【问题讨论】：

这些社交插件要么呈现为 iframe，内容从不同来源加载，要么呈现为 Shadow DOM 组件，这意味着您无法访问它们的内部元素。最多你可以尝试切断边框，通过将它们粘贴到具有隐藏溢出的父级中，并在所有边上给它们一个 -1px 的边距，或者类似的东西。
真的很有帮助，谢谢，CBroe。

标签： javascript html css facebook iframe

【解决方案1】：

div {position: relative; border: 2px solid #fff; width: 500px; height: 300px}
iframe {position: absolute; width: 100%; height: 100%; top: 0}
p {margin: 0; position: absolute; width: 100%; height: 100%; top: 0; border: 2px solid #FFF; z-index: 2; box-sizing: border-box}

<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
  <iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:6674757258863222784" frameborder="0" allowfullscreen="" title="Embedded post">
  </iframe>
  <p></p>
</div>
</body>
</html>

【讨论】：

稍微解释一下你的答案会对你有用。
您好Төрболд Жаргал，感谢您的回答。由于我是初学者，您能否向我确认您的解决方案在原始嵌入式帖子的现有浅灰色边框之上绘制了一个白色边框？如果不是，使用的机制是什么？谢了！
LinkedIn 的数据有灰色边框。你无法用 CSS 或 JS 让它消失。所以我使用 p 和 div 标签和 position 属性在 iframe 上生成白色边框。