css - 响应式 Tumblr 视频嵌入(用于文本帖子)

Question

我正在使用以下解决方案使 Tumblr 通过视频帖子类型响应嵌入 YouTube 视频:

.video-wrapper {
  position: relative;
  padding-bottom: 56,25%;
  overflow: hidden;
  width: 100% !important;
  height: 0 !important;
}

.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

连同这个 JS 片段

    // get all video wrappers
    var videoWrappers = document.getElementsByClassName('video-wrapper');
    // loop over each of them
    [].forEach.call( videoWrappers, function (el, i) {
        // cache width and height values of the iframe
        var width = el.getElementsByTagName('iframe')[0].width,
            height = el.getElementsByTagName('iframe')[0].height;
        // apply the padding to the video wrapper
        el.style.paddingBottom = height / width * 100 + '%';
    });

当帖子类型是视频时，这工作正常 - 但是，当视频嵌入标准文本帖子中时，视频不再响应(请参阅 blog.paulyb.me 以查看实际情况)。

我想弄清楚如何调整代码来解决这个问题，有什么建议吗？

Answer 1

你看到这个问题是因为你的视频帖子的 HTML 很可能是这样的；

{block:Video}

<div class="video-wrapper">
{VideoEmbed-700}
</div>

{/block:Video}

这只会影响视频帖子。

修复；
你不能有 DIV就在 HTML 文本帖子正文中的内嵌视频周围，但您可以在文本帖子正文周围放置一个视频，例如；

{block:Text}

{block:Title} <div class="text_title"> {Title} </div> {/block:Title}
<div class="text_body">
{Body}
</div>

{/block:Text}

现在您可以使用您的脚本来获取特定的 iframe s 里面 .text_body .

笔记:

现在您可以使用 querySelectorAll相反，并获得 iframe喜欢; document.querySelctorAll(".video-wrapper iframe, .text_body iframe#youtube_iframe") .

您可以选择尝试使用该装置 vw对于您的布局，只需使用 CSS 即可轻松处理此类事情。例如你的视频是 50vw在 width ，然后可以设置视频的 height至 28.125vw 16:9 的比例。

更新:

您无法使其工作，并且您没有发布您尝试过的代码，所以我实际上无法回答原因，但是您的脚本应该看起来像(我正在设置 height，这样您就不必做很多工作在你的 CSS 中):

var wrap = document.querySelctorAll(".video-wrapper iframe, .text_body iframe#youtube_iframe"), i;

for (i = 0; i < wrap.length; i += 1) {
    wrap[i].style.height = wrap[i].clientWidth * 0.5625 + 'px';
}

当你尝试这个时，不要忘记改变你有问题的 CSS，你不需要大部分。

尝试!让我知道!