javascript - 为什么仅在嵌入视频后加载javascript(fluidvids.js)才能正常工作？

在视频嵌入之前插入fluidvids.js代码时，我无法在我的github页面托管的网站（在fluidsvids.js / Poole上运行）上运行Jekyll。

但是，在视频嵌入后插入代码时，由于fluidvids.js，视频将调整为布局大小。这是为什么？

我将整个fluidvids zip文件提取到/public/js/fluidvids中。

在我的_includes文件夹中，创建了一个HTML文件fluidvids.html：

<!-- fluidvids.js -->
<script src="{{ site.baseurl }}public/js/fluidvids/dist/fluidvids.js"></script>
<script>
fluidvids.init({
  selector: ['iframe'],
  players: ['www.youtube.com', 'player.vimeo.com']
});
</script>

在我的default.html布局中，我插入了{% include fluidvids.html %}：

<!DOCTYPE html>
<html lang="en-us">

  {% include head.html %}
  {% include google_analytics.html %}

  <body>
    {% include fluidvids.html %}
    {% include sidebar.html %}

    <div class="content container">
      {{ content }}
    </div>

  </body>
</html>

最后，我在帖子中嵌入了两个视频进行测试； 2007-02-10-Island-of-Lost-Souls.md：

<iframe src="https://player.vimeo.com/video/9685584" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe width="420" height="315" src="https://www.youtube.com/embed/ZdyzjKDWpYU" frameborder="0" allowfullscreen></iframe>

但是，直到我在博客文章内容之后放置包含内容之后，视频才随着布局调整大小，如下所示：

<!DOCTYPE html>
<html lang="en-us">

  {% include head.html %}
  {% include google_analytics.html %}

  <body>
    {% include sidebar.html %}

    <div class="content container">
      {{ content }}
      {% include fluidvids.html %}
    </div>

  </body>
</html>

这是为什么？

Here's呈现的帖子，在博客帖子内容之后加载fluidvid.js时。

最佳答案

因为您在调用fluidvids.init之前不需要等待文档准备就绪（加载）。如果该脚本块在视频元素之前，则需要等待文档加载事件，否则初始化将（默默地失败？）失败，因为选择器不会返回任何元素，因为浏览器没有机会处理其标记然而。
因此，要么绑定到onload事件，然后运行fluidvids初始化，要么在有问题的元素之后添加脚本块。

顺便说一句，最佳做法是将脚本块包含在body元素的末尾。