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 for Video帖子就像是;

{block:Video}

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

{/block:Video}

这只会影响视频帖子。

修复; 您的HTML中的文字帖子正文中的内嵌视频周围不能有DIV，但您可以在文章帖子正文周围找到一个，例如;

{block:Text}

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

{/block:Text}

现在，您可以使用脚本获取iframe内的特定.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，您不需要大部分。

尝试！让我知道！

Answer 2

我接近上述建议，为文本帖子中的视频获取响应式iframe，但视频本身并没有顺利地调整框架大小。经过多次游戏，我遇到了fitvids.js，它完全符合我的要求。

fitvids.js

响应式Tumblr视频嵌入（用于文本帖子）

2 个答案: