响应式汤博乐视频嵌入(用于文本帖子)

Question

我使用以下解决方案使汤博乐通过视频帖子类型嵌入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.pulyb.me了解这一点）。

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

Answer 1

您看到这个问题是因为您的HTML for Video帖子很可能类似于；

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

这只会影响视频帖子。

修复；你不能在HTML中的Text帖子正文中的内联视频周围有DIV，但你可以在Text帖子正文周围有一个，比如；

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

现在，您还可以使用脚本获取.text_body中的特定iframe。

注：

现在您可以使用querySelectorAll，并获得类似的iframe；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，你将不需要它的大部分。

试试看！让我知道！

Answer 2

我同意了上面的建议，在文本帖子中为视频设置了一个响应iframe，但视频本身并不能顺利地随帧调整大小。在玩了很多之后，我发现fitvids.js正是我所需要的。

fitvids.js