Question

我已经在我的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/

Answer 1

如果您有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>

Answer 2

无法覆盖外部 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;
}

Answer 3

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

删除嵌入的youtube内联css

3 个答案: