删除嵌入的 youtube 内联 css答案

【问题标题】：Remove embeded youtube inline css删除嵌入的 youtube 内联 css
【发布时间】：2018-04-15 10:50:47
【问题描述】：

我在我的 wordpress 上嵌入了一个 youtube 订阅按钮，但它带有 padding-top:150%；作为来自 youtube 的内联 CSS。我如何删除该填充以将订阅按钮放在确切的位置。

<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="UCShv7275jgHM0uvHxZUkG2g" data-layout="" data-count="default"></div>

此页面侧边栏上的输出。 http://www.jonathanfritzler.org/i-am/

【问题讨论】：

有谁知道为什么要添加padding-top？

标签： javascript jquery css youtube

【解决方案1】：

您可以尝试在您自己的 style.css 中覆盖 g-ytsubscribe 类中的 padding-top 属性。

【讨论】：

尝试将 !important 添加到属性中。
我认为你甚至没有检查过，重要的已经用于内联 css。那是行不通的。
尝试使用 JavaScript 更改属性。这不是一个经典的解决方案，但应该可以。 var x = document.getElementsByClassName("<your-class>"); x[0].setAttribute("style", "padding-top: <your-value>;");

【解决方案2】：

如果您有 jQuery，请尝试将其添加到 html 页面的底部：

<script>
  $(document).ready(function() {
    var videoList = document.getElementsByClassName("fluid-width-video-wrapper"); [0].
    videoList.forEach(function(embededVideo) {
      embededVideo.setAttribute("style", "padding-top: 0px;");
    });
  });
</script>

如果您没有 jQuery，请将其添加到 html 页面的顶部：

 <script
      src="https://code.jquery.com/jquery-3.2.1.js"
      integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
      crossorigin="anonymous"></script>

【讨论】：

【解决方案3】：

无法覆盖外部 iframe 内的 CSS。因此，当您在自己的网站上嵌入来自 YouTube 的订阅按钮或视频时，您将无法以任何方式编辑该 iframe 中的内容。

但是，可以去掉 150% 的 padding-top，因为它不在 iframe 内。

在撰写本文时，YouTube 的嵌入式订阅按钮代码与此类似：

<script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channel="MyChannel" data-layout="full" data-count="default"></div>

这会在您放置代码的网页上生成以下 HTML（为简洁起见，我省略了一些代码）：

<div id="___ytsubscribe_0" style="[...]">
    <div class="fluid-width-video-wrapper" style="padding-top: 150%;">
        <iframe [...]></iframe>
    </div>
</div>

顶部填充位于 iframe 之外，因此您可以使用 CSS 定位它。下面的 CSS 代码将删除顶部填充：

/* remove 150% padding top added by youtube subscribe button */
#___ytsubscribe_0 .fluid-width-video-wrapper {
    padding-top: 0 !important;
}

【讨论】：