1

我正在使用以下解决方案使 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以查看此操作）。

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

4

2 回答 2

0

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

fitvids.js

于 2015-11-16T22:12:54.930 回答
0

你看到这个问题是因为你的视频帖子的 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改用，并获得iframes 喜欢；document.querySelctorAll(".video-wrapper iframe, .text_body iframe#youtube_iframe").

或者，您可以尝试使用该单元vw进行布局，只需 CSS 即可轻松处理此类事情。例如，您的视频50vw在 中width，那么您可以将视频设置为 16:9 的height比例28.125vw。

更新：

你无法让它工作，你没有发布你尝试过的代码，所以我实际上无法回答为什么，但你的脚本应该看起来像（我正在设置它，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，您将不需要大部分内容。

尝试！让我知道！

于 2015-11-09T03:30:41.613 回答