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

【问题标题】：Responsive Tumblr video embeds (for text posts)响应式 Tumblr 视频嵌入（用于文本帖子）
【发布时间】：2016-02-09 05:50:41
【问题描述】：

我正在使用以下解决方案使 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 sn-p

    // 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 以查看此操作）。

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

【问题讨论】：

标签： css youtube embed tumblr tumblr-themes

【解决方案1】：

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

{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}

现在您可以使用您的脚本来获取iframes 中的特定.text_body。

注意事项：

现在您可以改用querySelectorAll，并获得iframes 之类的； document.querySelctorAll(".video-wrapper iframe, .text_body iframe#youtube_iframe").

您也可以尝试使用单位vw 进行布局，这样只需 CSS 即可轻松处理此类事情。例如您的视频是width 中的50vw，那么您可以将视频的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，你不需要大部分。

试试吧！让我知道！

【讨论】：

您好，很遗憾，我无法使用此解决方案。我在文本帖子的正文中添加了一个 div，并复制了两个类并命名为 text_body 和 text_body iframe。然后我用你的代码行更新了 js（我试过 document.querySelctorAll 和 document.querySelectorAll 以防你的错字？）。这会导致两种视频类型都完全停止显示。我也曾尝试将 css 和 js 应用于文本正文，使标准视频帖子没有样式，这仍然导致文本正文视频停止显示。
更新：我尝试只为文本正文提供相同的视频包装类，这使得视频像视频帖子类型一样完美响应。但是，这也使文本帖子类型中的所有文本都消失了。那么，不确定这里是否有潜在的解决方案？
关于您的更新：这可能是因为您为“.video-wrapper”设置了样式。
是否需要 css 才能使此解决方案具有响应性？我使用的代码与您发布的完全一样，除了基本的 html 之外的所有模板都已从模板中删除，并且视频仅以固定大小显示。
你说的是页面加载后调整窗口大小的时候？不，不是大部分，我在答案中写的代码就是你必须用（例如）替换你的代码。您仍然会将代码放入函数中，并在调整浏览器窗口大小时再次调用它。比如：window.addEventListener('resize', theFunctionYouMade); 或者你已经在这样做了。我只能回答你的问题。

【解决方案2】：

我很接近上述建议，为文本帖子中的视频设置了响应式 iframe，但是视频本身并没有随着框架顺利调整大小。在玩了很多之后，我遇到了 fitvids.js，它完全符合我的要求。

fitvids.js

【讨论】：